官方推薦使用框架：react-navigation

下載：

npm install react-navigation
npm install react-native-gesture-handler react-native-reanimated

關(guān)聯(lián)：

react-native link react-native-reanimated
react-native link react-native-gesture-handler

修改MainActivity：

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

App.js 寫導航框架

import React from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";

import { LoginScreen } from './assets/business/login_screen';
import { MenuScreen } from './assets/business/menu_screen';

const AppNavigator = createStackNavigator(
    {
        Login: LoginScreen,
        Menu: MenuScreen
    },
    {
        initialRouteName: "Login"
    }
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

設(shè)置頁面標題：

    static navigationOptions = {
        title: '登錄',
    };

路由跳轉(zhuǎn)：

this.props.navigation.navigate('Menu');

帶參數(shù)的導航跳轉(zhuǎn)：

this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });

獲取參數(shù)：

const {navigation} = this.props;
const otherParam = navigation.getParam('otherParam');

頁面回調(diào)：
A頁面打開B頁面，A頁面?zhèn)鲄⒌臅r候可以傳遞一個callback方法。

    this.props.navigation.navigate('AreaList', {
      title: '區(qū)',
      parentId: this.state.city.areaCode,
      callback: area => {
        // Alert.alert("msg", JSON.stringify(area))
        this.setState({
          area: area,
        });
      },
    });

B頁面獲取callback方法并執(zhí)行。

    const {navigation} = this.props;
    const callback = navigation.getParam('callback');
    callback(item);
    navigation.goBack();