<TouchableOpacity onPress={() => navigation.navigate('Baslica')}> 不导航任何屏幕

Question

我尝试对使用TouchableOpacity 制作的自定义按钮之一进行 onPress 操作。它应该将我导航到另一个屏幕。我做了我在其他屏幕上所做的，但这次它不起作用并且也没有得到任何错误。在 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);

Answer 1

您需要将组件包装在根组件中的 AppContainer 标记之间，与下面类似，以便navigation 对象能够感知反应导航上下文。

import AppContainer from './navigation'; // your navigation.js file

export default class RootApp extends React.Component {

    ...

    render() {
        return <AppContainer>
        // the rest of your other components here
        </AppContainer>
    }
}

Answer 2

你应该像这样使用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);