react-navigation：从标题中的按钮导航到不同的屏幕

Posted 2023-03-14

【中文标题】react-navigation：从标题中的按钮导航到不同的屏幕

【英文标题】：react-navigation: Navigate to a different screen from a button in header

【发布时间】：2020-04-05 18:49:23

【问题描述】：

我的标题右侧有一个图标，按下该按钮我想导航到不同的屏幕。

我对此进行了很多搜索，但是所有解决方案都是针对类组件的，并且没有可用的官方文档。

我正在使用 react native 版本 0.61.4。

按下右侧标题中的图标时，我想移动“ProfileScreen”。所有其他导航工作正常。我在“HomeScreen”中有一个按钮可以移动到“ResultsScreen”，但无法从标题转到“ProfileScreen”。

这是我的代码的 sn-p

const Stack = createStackNavigator();

const App = () => 
    return (
        <SafeAreaView style= flex: 1 >
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen 
                        name="Home" 
                        component=HomeScreen
                        options=
                            
                                title: 'Home',
                                headerStyle: 
                                    backgroundColor: '#273469',
                                ,
                                headerTintColor: '#EBF2FA',
                                headerRight: () => (
                                    <Icon
                                      onPress=() => navigate('ProfileScreen')
                                      name="edit"
                                      type="material"
                                    />
                                ),
                            
                        
                    />
                    <Stack.Screen 
                        name="ResultsScreen" 
                        component=ResultsScreen
                    />
                    <Stack.Screen 
                        name="ProfileScreen"
                        component=ProfileScreen
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    )

【参考方案1】：

options 可以将函数作为参数，而该函数将props 作为参数。

这里是documentation

这里是 TypeScript 定义的信息：

     * Navigator options for this screen.
     */
    options?: ScreenOptions | ((props: 
        route: RouteProp<ParamList, RouteName>;
        navigation: any;
    ) => ScreenOptions);

如您所见，包含 navigation 对象，您可以使用它来调用导航，如下所示：

 options=( navigation ) => (
              title: 'Home',
              headerStyle: 
                backgroundColor: '#273469',
              ,
              headerTintColor: '#EBF2FA',
              headerRight: () => (
                <Icon
                  onPress=() => navigation.navigate('ProfileScreen')
                  name="edit"
                  type="material"
                />
              ),
            )

【讨论】：

花了我一段时间才找到它 :)

为什么我们在 ( navigation ) =>

之后使用 "("

@hakiko。 () 是 return 的语法糖。在此示例中，它与 navigation ) => return title....

相同

options=(navigation) => ( headerTitle: <HeaderComponent navigation=navigation /> ) 在我尝试向自定义标题组件添加导航时不起作用

奇怪的是我的导航是任何类型的。

【参考方案2】：

除了凯文的回答，你还可以在标题中添加一个简单的按钮：

 options=( navigation ) => (
              title: 'Home',
              headerStyle: 
                backgroundColor: '#273469',
              ,
              headerTintColor: '#EBF2FA',
              headerRight: () => (
                <Button                // a button in the header!     
                  onPress=() => 
                  navigation.navigate('Account')
                  title="Account"
                />
              ),
            )