导航没有传递到标题右键？

Question

我添加了几个标题右键，但是当我单击它们时，我收到以下错误：

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

这是标题的代码，它有标题右键：

   <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>
                
              ),

          }}/>

如何访问标题中的导航？

编辑：遵循文档并将其更改为：

        <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'是未定义的）

如何访问标题中的导航？

Answer 1

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

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

这是simplified working example。

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