React Native 路由（頁(yè)面跳轉(zhuǎn)）

1 曾經(jīng)的官方Navigation 后來(lái)0.44分離出來(lái)

React Native 頁(yè)面跳轉(zhuǎn) （版本號(hào):0。48)
源地址，只是簡(jiǎn)單翻譯
React Navigation

初始化一個(gè)新的項(xiàng)目

# 創(chuàng)建一個(gè)新的RN APP
react-native init SimpleApp
cd SimpleApp

# 安裝相關(guān)庫(kù) 國(guó)內(nèi)可能要用yarn？我用了梯子
npm install --save react-navigation

react-native install
#運(yùn)行
react-native run-android # or:
react-native run-ios

引入Navigator

import React from 'react';
import {
  AppRegistry,
  Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return <Text>Hello, Navigation!</Text>;
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

添加一個(gè)新的頁(yè)

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

引用自開(kāi)頭的地址

2 一位大嬸造的輪子

react-native-navigator-router