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对象了解react-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);

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

2 个答案: