react-native - navigation.navigate('Baslica')}> 不导航任何屏幕

Question

我试图对使用TouchableOpacity. 它应该将我导航到另一个屏幕。我做了我在其他屏幕上所做的事情，但这次它不起作用，也没有出现任何错误。在 Navigation.js 上，当我手动提供 initialRouteName 时，会出现屏幕，但是当我单击按钮时，什么也没有发生。

主屏幕：

import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";

const HomeScreen = ({ navigation }) => {
    return (
        <View>
            <TouchableOpacity onPress={() => navigation.navigate('Baslica')}>
                <ImageBackground
                    source={require("../../assets/HomeScreen/baslicaButton.png")}
                    resizeMode="contain"
                    style={styles.baslicaButton}
                    imageStyle={styles.baslicaButton_imageStyle}
                >
                    <Image
                        source={require("../../assets/HomeScreen/baslicaText.png")}
                        resizeMode="contain"
                        style={styles.baslicaText}
                    ></Image>
                    </ImageBackground>
                </TouchableOpacity>
          </View>
    );
}
export default HomeScreen;

导航JS：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';

const navigator = createStackNavigator(
  {
        Intro: IntroScreen,
        Home: HomeScreen,
        Baslica: BaslicaScreen
  },
  {
      initialRouteName: "Intro",

  }
);

export default createAppContainer(navigator);

标签： react-nativereact-navigation

Answer 1

你应该navigation像这样使用参数：

    this.props.navigation.navigate("yourScreen", { ParamName: Valu });

像这样编辑您的代码：

import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";

const HomeScreen = ({ navigation }) => {
    return (
        <View>
            <TouchableOpacity onPress={() => 
               this.props.navigation.navigate('Baslica')}>
                <ImageBackground
                    source={require("../../assets/HomeScreen/baslicaButton.png")}
                    resizeMode="contain"
                    style={styles.baslicaButton}
                    imageStyle={styles.baslicaButton_imageStyle}
                >
                    <Image
                        source={require("../../assets/HomeScreen/baslicaText.png")}
                        resizeMode="contain"
                        style={styles.baslicaText}
                    ></Image>
                    </ImageBackground>
                </TouchableOpacity>
          </View>
    );
}
export default HomeScreen;

并像这样编辑此代码：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';

const navigator = createStackNavigator(
  {
        Intro: {screen:IntroScreen},
        Home: {screen:HomeScreen},
        Baslica: {screen:BaslicaScreen},
  },
  {
      initialRouteName: "Intro",

  }
);

export default createAppContainer(navigator);