按 headers 图像在屏幕之间导航

Question

简单问题：我试图在按下 HomeScreen.js header 的图像后从 HomeScreen.js 导航到 MessageScreen。

但是，当我按下图像时，弹出错误消息：

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

你应该将 props 传递给你的函数，否则它无法知道这个 'navigation' 是什么，试试像

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

您是否尝试过使用：

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

或

props.navigation.navigate("MessageScreen") ?

Answer 3

试试这个：

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
        })
      }
    });