react-navigation 中的動態 header

Question

我正在使用react-navigation v5.0.0 的功能方法，並且我有一個堆棧導航器，其中包含：

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 組件大致如下所示：

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（“配置文件”）進行初始化：

Search.js / Visitors.js

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

問題是，在App.js中添加的發送按鈕需要配置文件 object 作為路由參數傳遞給Profile.js ，但在App.js中不可用。

因此，如何在Profile組件中創建 header 按鈕，以便我可以訪問配置文件 object？

Answer 1

您可以嘗試修改您的 options 道具以將路線作為參數，如下所示：

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

要將它放在您的 App.js 的上下文中，請注意選項如何是 function 以 { route } 作為參數並返回您的選項 object。

<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 文檔

Answer 2

實際上，我發現可以解決這個問題 - 它可以通過在Profile.js中添加 header 來解決（其中 object 可用）而不是在App.js中。

所以我剛剛刪除了headerRight中App.js的代碼，而是把它放在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 ' state 中的當前配置文件 object。