react-native - 在屏幕之间导航按标题图像

Question

简单的问题：我试图从HomeScreen.js到MessageScreen一次按下HomeScreen.js标题的图像。

但是，当我按下图像时，会弹出一个错误：

TypeError: navigation.navigate is not a function (In 'navigation-navigate("MessageScreen")', 'navigation.navigate' is undefined)

导航有什么问题？这是来自的主要代码App.js

const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: HomeScreen,
        navigationOptions: (navigation) => ({
            headerShown: true,
            title:'As minhas viagens',
            headerTintColor:'black',
            headerRight: ()=>  
                <TouchableOpacity onPress={() => navigation.navigate("MessageScreen")}>
                    <Image 
                    source={require("./assets/message.png")} 
                    style={{width: 40,height: 40, borderRadius: 40 / 2}}/>
                </TouchableOpacity>
        })
      },
      MessageScreen: {
        screen: MessageScreen,
        navigationOptions: () => ({
          headerShown: true
        })
      }
    });

Answer 1

你应该将道具传递给你的函数，否则它无法知道这个“导航”是什么，尝试类似

headerRight: ({navigation})=>  
                <TouchableOpacity 
                    onPress={() => navigation.navigate("MessageScreen")}>
                        <Image 
                        source={require("./assets/message.png")} 
                        style={{width: 40,height: 40, borderRadius: 40 / 2}}/>
                </TouchableOpacity>

或这个？

headerRight: (props)=>  
                <TouchableOpacity 
                    onPress={() => props.navigation.navigate("MessageScreen")}>
                        <Image 
                        source={require("./assets/message.png")} 
                        style={{width: 40,height: 40, borderRadius: 40 / 2}}/>
                </TouchableOpacity>

Answer 2

尝试这个：

const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: HomeScreen,
        navigationOptions: ({navigation}) => {
          return {
            headerShown: true,
            title:'As minhas viagens',
            headerTintColor:'black',
            headerRight: () =>  
                <TouchableOpacity onPress={() => navigation.navigate("MessageScreen")}>
                    <Image 
                    source={require("./assets/message.png")} 
                    style={{width: 40,height: 40, borderRadius: 40 / 2}}/>
                </TouchableOpacity>
          }
        })
      },
      MessageScreen: {
        screen: MessageScreen,
        navigationOptions: () => ({
          headerShown: true
        })
      }
    });

Answer 3

您是否尝试过使用：

this.props.navigation.navigate("MessageScreen")

或者

props.navigation.navigate("MessageScreen")?