React Navigation使用

配置导航堆栈

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

const Stack = createStackNavigator(); // createStackNavigator是一个返回包含2个属性的对象的函数：Screen和Navigator。

function HomeScreen() {
    return (
        <Tab.Navigator>
		      <Tab.Screen name="Feed" component={Feed} />
		      <Tab.Screen name="Messages" component={Messages} />
	    </Tab.Navigator>
    );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home"> {/* initialRouteName指定首先呈现的屏幕 */}
                {/* options选项可以指定一些选项 */}
                <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview' }} />
                {/* 传递额外的道具 */}
                <Stack.Screen name="Details">
                    {props => <DetailsScreen {...props} extraData={someData} />}
                </Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>
    );
}
export default App;

options 配置

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'Awesome app' }}
  />
  <Stack.Screen
    name="Profile"
    component={ProfileScreen}
    options={{ title: 'My profile' }}
  />
</Stack.Navigator>

// 还可以将该Screen的navigation和route传给options
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={({ navigation }) => ({
    title: 'Awesome app',
    headerLeft: () => (
      <DrawerButton onPress={() => navigation.toggleDrawer()} />
    ),
  })}
/>

// screenOptions适用于导航器中的所有屏幕,和options类似,这个函数也可以接收每个Screen的navigation和route
<Stack.Navigator
  screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

props

tabBarVisible: 显示或隐藏标签栏
headerShown: 是否显示或隐藏屏幕的标题
animationEnabled: 是否应在屏幕上启用过渡动画
gestureEnabled: 此屏幕是否可以使用手势

更多props看:
https://reactnavigation.org/docs/stack-navigator
https://reactnavigation.org/docs/bottom-tab-navigator/#options

用 navigation.setOptions({ … }) 可以更新
注意 想在组件中更新tabBarVisible要这样:

props.navigation.dangerouslyGetParent().setOptions({
     tabBarVisible: !value
})

https://reactnavigation.org/docs/navigation-prop/#dangerouslygetparent

Screen之间的跳转

navigation属性会传递到堆栈导航器中的每个屏幕组件

使用navigation.navigate(ScreenName)方法可以进行页面跳转。
每次进行跳转操作时,会检查导航堆栈中是否具有该名称的现有路由,如果没有会向堆栈push这条新路由。

navigation.popToTop()，可以返回到堆栈中的第一个屏幕。
navigation.goBack()，当可以从活动屏幕返回时，堆栈导航器提供的标题将自动包含一个后退按钮（如果导航堆栈中只有一个屏幕，则无法返回任何内容，因此没有返回键）。

将参数传递给嵌套导航器中的屏幕

navigation.navigate('Home', {
  screen: 'Messages',
  initial: false,
  params: { user: 'jane' },
});