由于rn版本更新杭朱，本文已不適用，有時間筆者會再寫一篇霎槐，把鏈接放下邊

以此獻給木有任何經(jīng)驗的初學者梦谜。愿我走過的痛楚你不必經(jīng)歷唁桩，愿我已有的幸福你觸手可及耸棒。

一、創(chuàng)建項目

安裝依賴

• 首先通過npm電腦全局安裝 react-natve-cli
• react-native init appname（appname是你要新建的APP名稱）

此時項目已經(jīng)新建成功 執(zhí)行 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}}>點擊跳轉(zhuǎn)</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}}>點擊跳轉(zhuǎn)</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的時候髓棋，小小的路由硬是死磕了三天惶洲，當時在網(wǎng)上找不到任何一篇可以指導我完成配置的教程，那會兒剛來公司實習签则，咱不會也不敢問啊铐料。隨著時間的流逝钠惩，知識漲起來了，臉皮也厚起來了膝捞，作為一個小菜鳥都敢寫簡書了愧沟。