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

Posted 2022-12-10 殇神马

一、前言
我们知道一个移动应用肯定不会只有一个页面，那么对于有很多页面的应用，页面之间肯定是需要相互跳转的；在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/，根据需求进行特有的配置；