使用reactnavigation5.x StackNavigator

1.安装

使用堆栈导航器前，请确保已经安装并配置了react-navigation/native，如果未安装请参考使用reactnavigation5.x 

npm install @react-navigation/stack
or
yarn add @react-navigation/stack

2.使用

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

完整示例代码

import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Notifications"
        onPress={() => navigation.navigate('Notifications')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Notifications" component={NotificationsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

3.配置详解

Stack.Navigator组件参数说明

initialRouteName

默认路由页面，即默认打开的页面。如果不配置，默认第一个页面。

screenOptions

screen参数配置

keyboardHandlingEnabled

导航到新的页面时虚拟键盘是否自动消失，默认true（自动消失）

mode

定义页面切换渲染过渡的风格

card：使用IOS或Android原生默认的过渡风格

modal:页面从底部进入屏幕，IOS的默认样式（Android可能无效）

headerMode

标题渲染模式

float：标题在顶部，切换页面时动态改变（IOS常用模式）

screen：标题在顶部，切换页面时随页面淡入淡出（Android常用模式）

none：没有标题

 screenOptions参数

title：标题内容

headerShown: 显示或隐藏标题，与上述headerMode=“null”效果一样