Блог

Я пытаюсь установить правую кнопку навигации при нажатии отправить отправить нас на главный экран внутри 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);
  

Вам не хватает 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