react-native - 屏幕上的动态标题更改

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 上，我有两个按钮：

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

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

这个屏幕有一个标题

你如何让它根据你点击的按钮加载不同的标题？

我找不到解决方案如何为基于函数和挂钩的组件执行此操作

标签： react-native

Answer 1

optionsprop 可以接受一个函数并{route, navigation}为您提供对象作为参数，因此要在标头中使用，params您可以这样做：

<Stack.Screen
    name="Learning"
    component={Learning}
    options={({ route }) => ({ title: route.params.screen })}
/>

我不确定在这种情况下功能组件和钩子有什么区别，但如果我误解了这个问题，您可以在功能组件中使用useNavigation和useRoute钩子，并执行您在类中执行的相同操作。