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

简单问题：按下

HomeScreen.js

标题的图像后，我试图从

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

const HomeStack=createStackNavigator({
主屏幕：{
屏幕：主屏幕，
导航选项：（导航）=>({
校长：是的，
标题：“作为minhas viagens”，
头部颜色：'黑色'，
头灯：（）=>
导航。导航（“MessageScreen”）}>
})
},
消息屏幕：{
屏幕：MessageScreen，
导航选项：（）=>({
校长：是的
})
}
});

你应该向你的函数传递道具，否则它无法知道这个“导航”是什么，试试下面的方法

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

headerRight:（{navigation}）=>
导航。导航（“MessageScreen”）}>

还是这个

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

headerRight:（道具）=>
props.navigation.navigate（“MessageScreen”）}>

你应该向你的函数传递道具，否则它无法知道这个“导航”是什么，试试下面的方法

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

headerRight:（{navigation}）=>
导航。导航（“MessageScreen”）}>

还是这个

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

headerRight:（道具）=>
props.navigation.navigate（“MessageScreen”）}>

您是否尝试过使用：

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

或

props.navigation.navigate（“MessageScreen”）

？

您是否尝试过使用：

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

或

props.navigation.navigate（“MessageScreen”）

？

尝试以下操作：

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

const HomeStack=createStackNavigator({
主屏幕：{
屏幕：主屏幕，
导航选项：（{navigation}）=>{
返回{
校长：是的，
标题：“作为minhas viagens”，
头部颜色：'黑色'，
头灯：（）=>
导航。导航（“MessageScreen”）}>
}
})
},
消息屏幕：{
屏幕：MessageScreen，
导航选项：（）=>({
校长：是的
})
}
});

试试这个：

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

const HomeStack=createStackNavigator({
主屏幕：{
屏幕：主屏幕，
导航选项：（{navigation}）=>{
返回{
校长：是的，
标题：“作为minhas viagens”，
头部颜色：'黑色'，
头灯：（）=>
导航。导航（“MessageScreen”）}>
}
})
},
消息屏幕：{
屏幕：MessageScreen，
导航选项：（）=>({
校长：是的
})
}
});

是的，我做了，我得到'TypeError:undefined不是对象（评估'props.navigation.navigate'）是的，我得到'TypeError:undefined不是对象（评估'props.navigation.navigate'）我尝试了这两种方法，但我得到'TypeError:undefined不是对象（评估'props.navigation.navigate'），抱歉。你可以尝试使用UseNavigationHook。但是看起来你用的不是RN导航5，我用的是RN 4.3。我对react native有些陌生，所以为什么我应该使用RN 5呢？5是react导航的新版本。它使用起来更简单，并且添加了大量的功能，这些功能肯定会对您有所帮助。例如，这个“useNavigation”钩子，您可以将其传递到任何React组件中，并在没有任何道具通过的情况下使用导航。但仅仅为了解决这个问题而重写整个导航可能有些过火了。为了解决这个小问题，我必须用我的应用程序重新开始几乎所有的事情：\，现在不值得。我已经尝试了两种方法，但我得到了“TypeError:undefined不是对象（评估”props.navigation.navigate'），抱歉。你可以尝试使用UseNavigationHook。但是看起来你用的不是RN导航5，我用的是RN 4.3。我对react native有些陌生，所以为什么我应该使用RN 5呢？5是react导航的新版本。它使用起来更简单，并且添加了大量的功能，这些功能肯定会对您有所帮助。例如，这个“useNavigation”钩子，您可以将其传递到任何React组件中，并在没有任何道具通过的情况下使用导航。但仅仅为了解决这个问题而重写整个导航可能有些过火了。为了解决这个小问题，我必须用我的应用重新开始几乎所有的事情：\，现在不值得。谢谢，它成功了！我现在很想知道，为什么我需要将“return”编码为导航选项的子项呢？

（）=>{}

后面的大括号作为功能块而不是对象块读取。因此，编译器认为您只是在一个块中写下了一些属性，而不是返回一个实际的对象。谢谢，它成功了！我现在很想知道，为什么我需要将“return”编码为导航选项的子项呢？

（）=>{}

后面的大括号作为功能块而不是对象块读取。因此，编译器认为您只是在块中写下了一些属性，而不是返回实际对象。