React Native使用React Navigation进行页面跳转

一、前言
我们知道一个移动应用肯定不会只有一个页面，那么对于有很多页面的应用，页面之间肯定是需要相互跳转的；在Android系统中，页面通过Activity栈进行管理,由AMS（ActivityManagerService）来实现页面跳转;
而在React Native中我们使用导航器（navigator）组件来实现页面之间的跳转;

二、React Navigation
react-navigation是一个单独的导航库，react-navigation中的视图是原生组件
同时用到了运行在原生线程上的Animated动画库，因而性能表现十分流畅。此外其动画形式和手势都非常便于定制;
React Native提供了StackNavigator、TabNavigator、DrawerNavigator三种类型的导航器来实现不同形式的页面切换;

（1）React Navigation使用步骤

• 导入react-navigation包

使用npm安装

npm install @react-navigation/native

使用yarn安装

yarn add @react-navigation/native

-导入相关的依赖项
需要安装这些依赖库react-native-gesture-handler，react-native-reanimated，react-native-screens和react-native-safe-area-context和@react-native-community/masked-view

使用npm安装

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

使用yarn安装

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

• 创建navigator
  要是用React Navigation,首先要创建一个navigator,React Navigation有三种默认的navigator

-StackNavigator
StackNavigator就和Android中的Activity栈一样，每次新打开的页面都会位于栈顶；
每次只渲染一个页面，并提供页面之间跳转的方法；
使用StackNavigator需要添加@react-navigation/stack依赖

使用npm安装

npm install @react-navigation/stack

使用yarn安装

yarn add @react-navigation/stack

现在我们定义一个需求：一个应用有两个页面SceenA,ScrenB,A页面中有一个按钮可以跳转至
ScreenB,ScreenB中有一个按钮可以返回至ScreenA;
首先我们要创建两个页面ScreenA,ScreenB;

SceenA

import React,{Component} from 'react'
import {
    View,
    Text,
    Button
} from 'react-native'
export default class ScreenA extends Component{

    constructor(props) {
        super(props);
    }

    render(){

        const  {navigation} = this.props

        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>ScreenA</Text>
                <Button title='跳转到ScreenB' onPress={()=>{
                    navigation.navigate('ScreenB')
                }}/>
            </View>
        )
    }

}

ScreenB

import React,{Component} from 'react'
import {
    View,
    Text,
    Button
} from 'react-native'
export default class ScreenA extends Component{

    render(){
        const {navigation}=this.props
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>ScreenB</Text>
                <Button
                  title='返回'
                  onPress={()=>{
                      navigation.goBack()
                  }}
                />
            </View>
        )
    }

}

创建StackNavigation导航器

import React ,{Component} from 'react'
import {
    View,
} from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ScreenA from './ScreenA';
import ScreenB from './ScreenB';
const Stack=createStackNavigator();
export  default  class  RootStack extends Component{

    render(){
       return (<NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name='ScreenA' component={ScreenA}/>
                <Stack.Screen name='ScreenB' component={ScreenB}/>
            </Stack.Navigator>
        </NavigationContainer>)
    }

}

然后再App.js中直接使用RootStack即可

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import CustomComponent from './CustomComponent';
import RootStack from './RootStack';

const App: () => React$Node = () => {
  return (
    <RootStack/>
  );
};

export default App;

通过使用StackNavigator就可以实现ScreenA跳转至ScreenB,ScreenB也可以返回至ScreenA的需求;

-TabNavigator
TabNavigator这个导航器是用来实现选项卡页面切换的，就和Android中的TabLayout实现的选项卡切换效果是一样的；
使用TabNavigator需要添加@react-navigation/bottom-tabs依赖

使用npm安装

npm install @react-navigation/bottom-tabs

使用yarn安装

yarn add @react-navigation/bottom-tabs

我们现在定义一个需求：一个应用主页面中有两个选项卡，点击选项卡可切换页面(TabScreenA,TabScreenB)
选项卡是图标和文字
首先创建选项卡页面TabScreenA,TabScreenB
TabScreenA

import React,{Component} from 'react'
import {
    View,
    Text
} from 'react-native'
export default class TabScreenA extends Component{

    render(){
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>TabScreenA</Text>
            </View>
        )
    }

}

TabScreenB

import React,{Component} from 'react'
import {
    View,
    Text
} from 'react-native'
export default class TabScreenB extends Component{

    render(){
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>TabScreenB</Text>
            </View>
        )
    }
}

创建选项卡导航器

import React,{Component} from 'react'
import {
    Image
} from 'react-native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import TabScreenA from './TabScreenA';
import TabScreenB from './TabScreenB';
const Tab=createBottomTabNavigator()
export default  class MainTab extends Component{

    render(){
        return (
            <NavigationContainer>
            <Tab.Navigator
                screenOptions={
                    ({route})=>({
                        tabBarIcon:({focused})=>{
                            let source='';
                            if (route.name=='TabScreenA'){
                                if (focused){
                                    source=require('./image/tab_a_select.png')
                                }else{
                                    source=require('./image/tab_a_gray.png')
                                }
                            }else if (route.name=='TabScreenB'){
                                if (focused){
                                    source=require('./image/tab_b_select.png')
                                }else{
                                    source=require('./image/tab_b_gray.png')
                                }
                            }
                            return <Image source={source} style={{width:40,height:40}}/>;
                        },
                    })
                }

                tabBarOptions={{
                    activeTintColor: 'red',
                    inactiveTintColor: '#dbdbdb',
                    showIcon:true
                }}
            >
                <Tab.Screen name='TabScreenA' component={TabScreenA}></Tab.Screen>
                <Tab.Screen name='TabScreenB' component={TabScreenB}></Tab.Screen>
            </Tab.Navigator>
            </NavigationContainer>
        )
    }

}

然后在App.js中直接使用选项卡导航器MainTab即可

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import CustomComponent from './CustomComponent';
import RootStack from './RootStack';
import MainTab from './MainTab';

const App: () => React$Node = () => {
  return (
      <MainTab/>
  );
};

export default App;

以上就实现了选项卡切换页面效果了

-DrawerNavigator
DrawerNavigator这个导航器和Android中的DrawerLayout抽屉布局的效果是一样 的，可以通过拖拽滑出一个侧滑菜单
使用DrawerNavigator需要添加@react-navigation/drawer依赖

使用npm安装

npm install @react-navigation/drawer

使用yarn安装

yarn add @react-navigation/drawer

我们现在定义一个需求，一个应用的主界面MainScreen，可从左侧拖住出一个侧滑菜单

创建主界面 MainScreen

import React,{Component} from 'react'
import {
    View,
    Text
} from 'react-native'
export default class MainScreen extends Component{

    render(){
        return (
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:30}}>主页面</Text>
            </View>
        )
    }

}

创建侧滑菜单内容组件 DrawerMenu

import React,{Component} from 'react'
import {
    View,
    Text,
    TouchableHighlight
} from 'react-native'
export default class DrawerMenu extends Component{
 constructor(props) {
     super();
 }
    render(){
        const {navigation}=this.props
        console.log('DrawerMenu',navigation)
        return (
            <View>
                <TouchableHighlight style={{padding:15}} onPress={()=>{
                    navigation.closeDrawer();
                }}>
                    <Text style={{fontSize:20}}>菜单选项A</Text>
                </TouchableHighlight>
                <TouchableHighlight  style={{padding:15}}  onPress={()=>{
                    navigation.closeDrawer();
                }}>
                    <Text style={{fontSize:20}}>菜单选项B</Text>
                </TouchableHighlight>
                <TouchableHighlight  style={{padding:15}}  onPress={()=>{
                    navigation.closeDrawer();
                }}>
                    <Text style={{fontSize:20}}>菜单选项C</Text>
                </TouchableHighlight>
            </View>

        )

    }

}

创建抽屉布局导航器MainDrawer

import React,{Component} from 'react'
import {
    View
} from 'react-native'
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import MainScreen from './MainScreen';
import DrawerMenu from './DrawerMenu';
const Drawer=createDrawerNavigator();
export default class MainDrawer extends Component{

    constructor(props) {
        super(props);
    }

    render(){
        return (
            <NavigationContainer>
                <Drawer.Navigator drawerContent={(props)=>{
                    return <DrawerMenu {...props} />
                }}>
                    <Drawer.Screen name='MainScreen' component={MainScreen}></Drawer.Screen>
                </Drawer.Navigator>
            </NavigationContainer>
        )
    }

}

直接在App.js中使用MainDrawer即可

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import CustomComponent from './CustomComponent';
import RootStack from './RootStack';
import MainTab from './MainTab';
import MainDrawer from './MainDrawer';

const App: () => React$Node = () => {
  return (
      <MainDrawer/>
  );
};

export default App;

以上就是三种导航器的基本使用，当然每一种导航器还有详细的配置，这个可以直接去React Navigation的官网查看详细的配置https://reactnavigation.org/，根据需求进行特有的配置；