react-native项目的新建以及路由配置

以此献给木有任何经验的初学者。愿我走过的痛楚你不必经历，愿我已有的幸福你触手可及。

一、创建项目

安装依赖

• 首先通过npm电脑全局安装 react-natve-cli
• react-native init appname（appname是你要新建的APP名称）

此时项目已经新建成功 执行 react-native run-ios --simulator 'iPhone X'即可在模拟器运行

二、路由配置

安装依赖

• npm install react-navigation --save
• npm install react-native-gesture-handler --save
• npm i react-native-vector-icons --save（日后配置底部导航会用到）

Link依赖

• react-native link react-native-gesture-handler
• react-native link react-native-vector-icons

三 、代码

• 首先在根目录下新建一个project文件夹
• 在project文件夹下新建navigation文件夹用于存放页面路由配置
  新建pages文件夹用于存放页面文件
• 在navigation文件夹下新建index.js文件，书写路由配置，index.js代码如下

import React, { Component } from 'react'
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
} from 'react-navigation'
import Ionicons from 'react-native-vector-icons/Ionicons'

import {
  Login,
  PhoneLogin,
} from '../pages/index'

const SketchRouter = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: ({ navigation }) => ({
        header: null
      }),
    },
    PhoneLogin: {
      screen: PhoneLogin,
      navigationOptions: ({ navigation }) => ({
        header: null
      }),
    },
  },
  
  {
    headerBackTitleVisible: false,
  }
)

export default createAppContainer(SketchRouter)

• 在pages文件夹下新建三个js文件
  1. Login.js(本项目中的首页)，代码如下

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
} from "react-native";
import { SafeAreaView } from "react-navigation";
import Images from "../images/index";
import { scaleSizeH, scaleSizeW } from "../size/index";
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     
    };
  }
  render() {
    return (
      <SafeAreaView style={styles.contaner}>
        <StatusBar barStyle="dark-content" />
        <TouchableOpacity onPress={()=>{this.props.navigation.navigate('PhoneLogin')}} style={styles.test}>
          <Text style={{fontSize:18}}>点击跳转</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  contaner: {
    backgroundColor: "#fff",
    flex: 1,
    justifyContent:'center',
    alignItems: 'center',
  },
  test:{
    width: 150,
    height: 150,
    justifyContent:'center',
    alignItems: 'center',
    backgroundColor: '#0f0',
  },
});

2. PhoneLogin.js,代码如下

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
} from "react-native";
import { SafeAreaView } from "react-navigation";
import Images from "../images/index";
import { scaleSizeH, scaleSizeW } from "../size/index";

export default class PhoneLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     
    };
  }
  render() {
    return (
      <SafeAreaView style={styles.contaner}>
        <StatusBar barStyle="dark-content" />
        <TouchableOpacity onPress={()=>{this.props.navigation.navigate('Login')}} style={styles.test}>
          <Text style={{fontSize:18}}>点击跳转</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  contaner: {
    backgroundColor: "#fff",
    flex: 1,
    justifyContent:'center',
    alignItems: 'center',
  },
  test:{
    width: 150,
    height: 150,
    justifyContent:'center',
    alignItems: 'center',
    backgroundColor: '#f00',
  },
});

3. index.js 代码如下

import Login from './Login'
import PhoneLogin from './PhoneLogin'

export {
  Login,
  PhoneLogin,
}

四、修改App.js文件，代码如下

import React, { Component } from 'react'
import { Platform, StyleSheet, } from 'react-native'
import SketchRouter from './project/navigation/index'

export default class App extends Component {
  render () {
    console.disableYellowBox = true
    return (
        <SketchRouter />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 300,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

五、run起来！

• react-native run-ios --simulator 'iPhone X'
  iPhone X可以换成任意机型的苹果

想当初第一次接触react-native的时候，小小的路由硬是死磕了三天，当时在网上找不到任何一篇可以指导我完成配置的教程，那会儿刚来公司实习，咱不会也不敢问啊。随着时间的流逝，知识涨起来了，脸皮也厚起来了，作为一个小菜鸟都敢写简书了。