如何通过onPress在带有navigationOptions的App.js中调用Screen？

问题描述

我正在尝试设置按下导航按钮时的右键，将我们发送到App.js内部的主屏幕无法找到或弄清楚如何使用导航。

App.js的相关部分在这里：

const navigator = createStackNavigator(
    {
        Intro: { screen: IntroScreen },Home: { screen: HomeScreen },Ulasim: {
            screen: Ulasimscreen,navigationoptions: {
                headerRight: () => (<View>

                    <TouchableOpacity onPress={() => navigation.navigate('Home') }>
                        <Image
                            style={{ flexDirection: "row",justifyContent: "center",alignItems: "center",marginRight: 20,height: 20,width: 20 }}
                            resizeMode='contain'
                            source={require("./assets/homeButtonBlue.png")} />
                    </TouchableOpacity>
                </View>),headerBackImage: () => (<View>
                    <Image
                        style={{ flexDirection: "row",borderWidth: 1,marginLeft: 20,width: 20 }}
                        resizeMode='contain'
                        source={require("./assets/VectorBlue.png")} />
                </View>)
            },},export default createAppContainer(navigator);

解决方法

您缺少navigation参数

更改此：

const navigator = createStackNavigator(
    {
        Intro: { screen: IntroScreen },Home: { screen: HomeScreen },Ulasim: {
            screen: UlasimScreen,navigationOptions: {
                headerRight: () => (<View>

                    <TouchableOpacity onPress={() => navigation.navigate('Home') }>
                        <Image
                            style={{ flexDirection: "row",justifyContent: "center",alignItems: "center",marginRight: 20,height: 20,width: 20 }}
                            resizeMode='contain'
                            source={require("./assets/homeButtonBlue.png")} />
                    </TouchableOpacity>
                </View>),headerBackImage: () => (<View>
                    <Image
                        style={{ flexDirection: "row",borderWidth: 1,marginLeft: 20,width: 20 }}
                        resizeMode='contain'
                        source={require("./assets/VectorBlue.png")} />
                </View>)
            },},export default createAppContainer(navigator);

对此：

const navigator = createStackNavigator({
  Intro: { screen: IntroScreen },Ulasim: {
    screen: UlasimScreen,navigationOptions: ({ navigation }) => ({
      headerRight: () => (
        <View>
          <TouchableOpacity onPress={() => navigation.navigate("Home")}>
            <Image
              style={{
                flexDirection: "row",width: 20,}}
              resizeMode="contain"
              source={require("./assets/homeButtonBlue.png")}
            />
          </TouchableOpacity>
        </View>
      ),headerBackImage: () => (
        <View>
          <Image
            style={{
              flexDirection: "row",}}
            resizeMode="contain"
            source={require("./assets/VectorBlue.png")}
          />
        </View>
      ),}),});

export default createAppContainer(navigator);

参考：https://reactnavigation.org/docs/4.x/stack-navigator#routeconfigs