Question

我正在创建一个带有本机响应的应用程序，并使用lib react导航。尝试使按钮调用新屏幕时，导航不响应单击，有人知道它可能是什么吗？

App.js

import Initial from "./app/screens/Initial";
import Login from "./app/screens/Login";

const AppNavigator = createStackNavigator(
  {
    Initial:{
      screen: Initial
    },
    Login:{
      screen: Login
    }
  },
  {
    initialRouteName: 'Initial',
    headerMode: 'none',
  }
);

export default createAppContainer(AppNavigator);

Initial.js（我的屏幕）

这是我渲染按钮并调用click事件以响应反应导航的屏幕

import React, { Component } from "react";
import { View, StyleSheet, Text, ImageBackground } from "react-native";
import Button from "../components/Form/Button";
import imageLogo from "../assets/images/background2.jpg";
import colors from "../config/color";


class Initial extends Component {

  render(){

    const { navigate } = this.props.navigation;

    return (
      <View style={styles.wrapper}>
        <ImageBackground source={imageLogo} style={styles.image}>
          <Text style={styles.appName}>Hello</Text>
          <View style={styles.areaMarketing}>
            <Text style={styles.textAds}>text text text </Text>
            <Text style={styles.textAds}>good good good.</Text>
          </View>
          <View style={styles.form}>
            <Button onPress={() => this.props.navigation.navigate('Login')}
              buttonBackColor={colors.emerald}
              buttonBorderColor={colors.emerald}
              color={colors.white} labelButton="Entrar"/>
            <Button labelButton="Criar conta"/>
          </View>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: "space-between"
  },

  form: {
    flex: 1,
    justifyContent: "flex-end"
  },

  appName: {
    margin: 20,
    fontSize: 25,
    fontFamily: "Nunito-Bold",
    color: colors.white
  },

  areaMarketing: {
    marginLeft: 20
  },

  textAds: {
    color: colors.white,
    fontSize: 23,
    fontFamily: "Nunito-Regular"
  },

  image: {
    width: "100%",
    height: "100%"
  }
});

export default Initial;

package.json

"dependencies": {
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-gesture-handler": "^1.3.0",
    "react-navigation": "^3.11.1",
    "react-navigation-stack": "^1.9.4"

Answer 1

请查看带有两个屏幕的单个文件App.js的React Navigation 3个简单的实时示例： https://snack.expo.io/r1eXFk7tB

P.S。您没有提供问题的完整代码，例如单击处理程序和按钮的呈现，但是我想您可以看到示例来在项目中查找问题。

反应导航不响应单击按钮

1 个答案: