使用react-navigation

安装

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view  @react-navigation/stack @react-navigation/native

代码

• 创建router/nav.js

  import React from 'react';
  import { NavigationContainer, NavigationState } from '@react-navigation/native';
  import {
    createStackNavigator,
    TransitionPresets,
  } from '@react-navigation/stack';
  //登录
  import LoginAndRegister from '../pages/users/loginAndRegister';
  // 工具
  import LocalStorageUtils from '../utils/LocalStorageUtils';
  
  const Stack = createStackNavigator();
  
  class Nav extends React.Component {
    constructor(props) {
      super(props);
      // 之前在mobx中的index.js中把所有的信息都存到了userInfo中
      LocalStorageUtils.get('userInfo').then((userInfo) => {
        if (userInfo !== null) {
          // 1.重新获取用户信息
          // 2.存储到mobx中
        } else {
          // 跳转登录
  
          // 使用了mobx
          // this.props.navigate()
        }
      });
    }
  
    render() {
      return (
        <NavigationContainer
          onStateChange={(state: NavigationState) => {
            NavigationHelper.navRouters = state.routes;
          }}
        >
          <Stack.Navigator
            // 一打开页面的时候，先显示哪一个页面
            initialRouteName="Tab"
            // 隐藏顶部的大标题
            headerMode={'none'}
            mode={'card'}
            screenOptions={(navigation) => {
              NavigationHelper.navigation = navigation.navigation;
            }}
          >
            {/*用户*/}
            {/*登录*/}
            <Stack.Screen
              name="LoginAndRegister"
              component={LoginAndRegister}
              options={{
                ...TransitionPresets.SlideFromRightIOS,
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }
  }
  
  export default Nav;
  
  

• app.js

  import React, { Component } from 'react';
  import { StatusBar, View } from 'react-native';
  import Nav from './src/router/nav';
  import { Provider } from 'mobx-react';
  import RootStore from './src/mobx/index';
  import './src/utils/fontUtils';
  // socket.io
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    render() {
      return (
        <View style={{ flex: 1 }}>
          <StatusBar
            translucent={true}
            backgroundColor={'transparent'}
            barStyle={'dark-content'}
          />
          <Provider RootStore={RootStore}>
            <Nav />
          </Provider>
        </View>
      );
    }
  }
  
  export default App;