React Native 导航

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

下载：

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

关联：

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 />;
    }
}

设置页面标题：

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

路由跳转：

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

带参数的导航跳转：

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

获取参数：

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

页面回调：
A页面打开B页面，A页面传参的时候可以传递一个callback方法。

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

B页面获取callback方法并执行。

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