我如何在 App.js 内使用带有 onPress 的 navigationOptions 调用 Screen？

Question

我正在尝试设置右导航按钮，当按下时将我们发送到内部主屏幕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", justifyContent: "center", alignItems: "center", borderWidth: 1, marginLeft: 20, height: 20, width: 20 }}
                        resizeMode='contain'
                        source={require("./assets/VectorBlue.png")} />
                </View>)
            },
        },
 },

export default createAppContainer(navigator);

Answer 1

您缺少 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", justifyContent: "center", alignItems: "center", borderWidth: 1, marginLeft: 20, height: 20, width: 20 }}
                        resizeMode='contain'
                        source={require("./assets/VectorBlue.png")} />
                </View>)
            },
        },
 },

export default createAppContainer(navigator);

为此：

const navigator = createStackNavigator({
  Intro: { screen: IntroScreen },
  Home: { screen: HomeScreen },
  Ulasim: {
    screen: UlasimScreen,
    navigationOptions: ({ navigation }) => ({
      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",
              justifyContent: "center",
              alignItems: "center",
              borderWidth: 1,
              marginLeft: 20,
              height: 20,
              width: 20,
            }}
            resizeMode="contain"
            source={require("./assets/VectorBlue.png")}
          />
        </View>
      ),
    }),
  },
});

export default createAppContainer(navigator);

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

我如何在 App.js 内使用带有 onPress 的 navigationOptions 调用 Screen？

How can i call Screen inside App.js with navigationOptions with onPress?

react-native

react-navigation

stack-navigator