Question

我有一个导航代码：

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
    <Stack.Screen name='Learning' component={Learning}
      options={{
        headerTransparent: true,
        title: 'Learning',
        headerTitleAlign: 'center',
      }} />
  </Stack.Navigator>
</NavigationContainer>

我将“学习”屏幕用于两个功能应用程序屏幕：

A
B

在屏幕A上，我有两个按钮：

<TouchableOpacity onPress={() => navigation.navigate('Learning', { screen: 'Learning' })}/>
<TouchableOpacity onPress={() => navigation.navigate('Learning', { screen: 'Repeats' })}/>

根据此内容，{screen: 'Learning'}正在加载其他数据

此屏幕上有标题标题

如何根据单击的按钮使它加载不同的标题？

我找不到针对基于函数和挂钩构建的组件

的解决方案

Answer 1

head道具可以使用一个函数并为您提供options对象作为参数，因此要在标题中使用{route, navigation}，您可以这样做：

params

我不确定在这种情况下功能组件和挂钩有什么区别，但是如果我误解了这个问题，可以在功能组件中使用<Stack.Screen name="Learning" component={Learning} options={({ route }) => ({ title: route.params.screen })} />和useNavigation挂钩，然后与您在课堂上所做的相同。

屏幕上的动态标题更改

1 个答案: