react-navigation 中的动态 header

Question

我在 react-navigation v5.0.0 中使用函数式方法，并且我有一个 stack-navigator，其中包含：

App.js

<Stack.Screen
   name="Profil"
   component={Profile}
   options={{
      headerStyle: {
         backgroundColor: '#2270b9'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
         color: 'white'
      },
      headerRight: () => (
         <View style={{ flex: 1, flexDirection: 'row' }}>
            <Ionicons
               style={{ color: 'white', marginRight: 15, marginTop: 5 }}
               size={32}
               onPress={() => { _sendMessage(...) }}            // <--- problem is here
               name="ios-mail"
               backgroundColor="#CCC"
            />
         </View>
      )
   }}
/>

配置文件组件大致如下所示：

Profile.js

export default function Profile({ route, navigation }) {
   const { profile } = route.params;

   return (
      <SafeAreaView style={styles.container}>
         <View style={styles.container}>
            <ScrollView contentContainerStyle={styles.contentContainer}>
   [...]

现在的问题是，当配置文件打开时，Profile 会使用负载 object ("profile") 进行初始化：

Search.js / Visitors.js

navigation.navigate('Profil', { profile });

问题是，添加到 App.js 中的 send-button 需要作为路由参数传递给 Profile.js 的配置文件 object，但它是在 App.js.

中不可用

如何在 Profile 组件中创建 header 按钮，以便我可以访问配置文件 object？

Answer 1

您可以尝试修改您的 options 属性以将路由作为参数，如下所示：

options={({ route: { params: { profile } } }) => ({
  /** use profile here */
})

为了将其置于您的 App.js 上下文中，请注意选项是如何将 { route } 作为参数并返回您的选项对象的函数。

<Stack.Screen
   name="Profil"
   component={Profile}
   options={({ route: { params: { profile } } }) => ({ // <- Note that options in now a function
      headerStyle: {
         backgroundColor: '#2270b9'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
         color: 'white'
      },
      headerRight: () => (
         <View style={{ flex: 1, flexDirection: 'row' }}>
            <Ionicons
               style={{ color: 'white', marginRight: 15, marginTop: 5 }}
               size={32}
               onPress={() => { _sendMessage(profile) }} // <--- you can use profile here
               name="ios-mail"
               backgroundColor="#CCC"
            />
         </View>
      )
   })}
/>

react-navigation docs

Answer 2

实际上，我发现可以解决这个问题 - 它可以通过在 Profile.js（object 可用的地方）而不是 [=12] 中添加 header 来解决=].

所以我刚刚删除了 App.js 中 headerRight 的代码，而是将其放入 Profile.js:

export default function Profile({ route, navigation }) {
   const { profile } = route.params;

   React.useLayoutEffect(() => {
      navigation.setOptions({
         headerRight: () => (
            <View style={{ flex: 1, flexDirection: 'row' }}>
               <Ionicons
                  style={{ color: 'white', marginRight: 15, marginTop: 5 }}
                  size={32}
                  onPress={_onSendMessage}
                  name="ios-mail"
                  backgroundColor="#CCC"
                  enabled={ profile && profile.core ? true : false}
               />
            </View>
         )
      });
    }, []);

这样，无论从何处打开 Profile.js，按钮回调都可以访问处于 Profile.js 状态的当前配置文件 object。

react-navigation 中的动态 header

Dynamic header in react-navigation

javascript

navigation

header

react-native

react-navigation