react-native 使用react-navigation，屏幕切换

1、安装react-navigation

两种方式任选

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

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

2、使用react-navigation

import {NavigationContainer} from '@react-navigation/native'
//管理导航树并包含导航状态的组件
import {createStackNavigator} from '@react-navigation/stack'
//堆栈导航器
const Stack = createStackNavigator()
//创建堆栈导航器

代码

import React from 'react'
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'
import Page1 from '../src/Page1'
import Page2 from '../src/Page2'
import Page3 from '../src/Page3'
const Stack = createStackNavigator()
function App(){
    return <NavigationContainer>
        <Stack.Navigator initialRouteName='Page1'>
            <Stack.Screen name='Page1' component={Page1}/>
            <Stack.Screen name='Page2' component={Page2}/>
            <Stack.Screen name='Page3' component={Page3}/>
        </Stack.Navigator>
    </NavigationContainer>
}
export default App

page1

import React from 'react'
import { View, Text, Button } from 'react-native'
export default function ({ navigation }) {
    return <View>
        <Text>page1</Text>
        <Button title='navigate to page2' onPress={() => { navigation.navigate('Page2') }} />
        <Button title='push to page2' onPress={() => { navigation.push('Page2') }} />
    </View>
}

page2

import React from 'react'
import { View, Text, Button } from 'react-native'
export default function ({ navigation }) {
    return <View>
        <Text>page2</Text>
        <Button title='navigate to page1' onPress={() => navigation.navigate('Page1')} />
        <Button title='push to page1' onPress={() => navigation.push('Page1')} />
        <Button title='navigate to page3' onPress={() => navigation.navigate('Page3')} />
    </View>
}

page3

import React from 'react'
import { View, Text, Button } from 'react-native'
export default function ({navigation}) {
    return <View>
        <Text>page3</Text>
        <Button title='goBack' onPress={() => navigation.goBack()} />
        <Button title='popToPop' onPress={() => navigation.popToTop()} />
    </View>
}

3、屏幕切换

function ({navigation}){}
//组件中传入navigation
navigation.navigate('Page2')
//转跳到Page2，如果已经在Page2，则什么也不做
//首先尝试查找具有该名称的现有路由，仅在堆栈总没有新路由时才推送新路由
navigation.push('Page2')
//总是向导航堆栈添加一条新路线
navigation.goBack()
//返回上个屏幕
//如果导航堆栈中只有一个屏幕，则无法返回任何内容，因此没有返回键。
navigation.popToTop()
//返回到堆栈中的第一个屏幕

page1 navigate 到 page2
page2 navigate 到 page1

page1 navigate 到 page2
page2 push 到 page1
page1 返回 page2
page2 返回 page1
注意左上角返回键

page1 navigate 到 page2
page2 navigate 到 page3
page3 gobakc到 page2
page1 navigate 到 page2
page2 navigate 到 page3
page3 popToTop到 page1