导航没有传递到 header 右键？

Question

我添加了几个 header 右键，但是当我点击它们时，出现以下错误：

TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

这是 header 的代码，它有 header 个右键：

   <Stack.Screen 
          name="Tabs" 
          component={Tabs} 
          options =  {{
              title: " ",
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 24,
                color: '#FFFFFF'
              },
              headerStyle: {
                backgroundColor: '#121212',
                shadowColor: 'transparent'
              },
              headerRight: () => (
                <View style={{flexDirection: "row"}}>

                  <TouchableOpacity 
                    style={{paddingRight: 20}}
                    onPress={() => this.props.navigation.navigate('Search')}>
                    <Ionicons name="ios-search" size={25} color="white" />
                  </TouchableOpacity>

                  <TouchableOpacity 
                      style={{paddingRight: 20}}
                      onPress={() => this.props.navigation.navigate('Notifications')}>
                      <Ionicons name="md-notifications" size={25} color="white" />
                  </TouchableOpacity>

                </View>
                
              ),

          }}/>

如何访问 header 中的导航？

编辑：按照文档并将其更改为：

        <Stack.Screen 
          name="Tabs" 
          component={Tabs} 
          options = {( navigation ) => ({
              title: " ",
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 24,
                color: '#FFFFFF'
              },
              headerStyle: {
                backgroundColor: '#121212',
                shadowColor: 'transparent'
              },
              headerRight: () => (
                <View style={{flexDirection: "row"}}>

                  <TouchableOpacity 
                    style={{paddingRight: 20}}
                    onPress={() => navigation.navigate('Search')}>
                    <Ionicons name="ios-search" size={25} color="white" />
                  </TouchableOpacity>

                  <TouchableOpacity 
                      style={{paddingRight: 20}}
                      onPress={() => navigation.navigate('Notifications')}>
                      <Ionicons name="md-notifications" size={25} color="white" />
                  </TouchableOpacity>

                </View>
                
              ),

          })}/>

但现在出现此错误：

TypeError: navigation.navigate 不是函数。 (在'navigation.navigate('Search')'中，'navigation.navigate'未定义)

如何访问 header 中的导航？

Answer 1

您可以将options定义为将导航对象作为参数的函数：

options={({ navigation }) => ({
    title: " ",
    headerTitleStyle: { ... }
})}

这里是simplified working example.

可以找到其他用例 in react-navigation documentation。

导航没有传递到 header 右键？

Navigation not passing to header right button?

javascript

react-native

react-native-navigation