javascript - 使用 Stack Navigator 时 Prop 未定义

Question

我是 React Native 新手，在 React-Native 中使用 StackNavigator 组件时遇到了未定义 props 的问题。

我花了几天时间寻找问题的答案，但没有找到解决问题的正确方法。

问题在于将 Prop 传递给子组件，它们是未定义的，但是，我遵循的教程除了这些步骤之外没有做任何其他事情。

这里是我的应用程序的屏幕和代码

当点击登录屏幕中的绿色按钮时，预期结果是导航到我的主屏幕，但结果是“ Prop 未定义”

如果有人能帮助我解决这个问题并帮助我找出问题出在哪里，我将非常感激!

我的代码:

App.js 文件

 import React from 'react';
 import { StyleSheet, Text, View, StatusBar} from 'react-native';
 import Login from './src/components/login/Login';
 import {StackNavigator} from 'react-navigation';
 import MainScreen from './src/components/main/MainScreen';

 export default class App extends React.Component {
   static navigationOptions = { title: 'Welcome', header: null };
   render() {
     return (
     <AppNavigation />
     );
    }
 }
  const AppNavigation = StackNavigator({
    LoginScreen : {screen : Login},
    MainScreen : {screen : MainScreen},
  })
  const styles = StyleSheet.create({
    container: {
      backgroundColor: '#3498db',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

Login.js ，这个组件描述了我的登录页面。它还呈现组件 LoginForm，其中我描述了 InputText 和 TouchableOpacity，其中我有 onPress 方法，该方法必须将我导航到 MainScreen

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image
} from 'react-native';
import LoginForm from './LoginForm'

export default class Login extends React.Component {
  static navigationOptions = { title: 'Welcome', header: null };


  render() {
    return (
      <View style={styles.container}>
          <View style={styles.logoContainer}>
            <Image
              source = {require('../../../images/logo.png')}
              style = {styles.logo}>
            </Image>
            <Text style = {styles.title}>Добро пожаловать!</Text>
            <Text style = {styles.titleLower}>Введите код для         авторизации</Text>
      </View>

      <View style = {styles.formContainer}>
        <LoginForm/>
      </View>
  </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor : '#3493db'
  },
  logoContainer : {
    flexGrow : 1,
    alignItems : 'center',
    justifyContent : 'center'
  },
  logo : {
    width : 120,
    height : 120
  },
  title : {
    color : '#fff',
    marginBottom : 10,
    fontSize : 22
  },
  titleLower : {
    color : '#fff',
    marginTop : 5,
    fontSize : 12
  }
});

登录表单.js

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  StatusBar
} from 'react-native';

export default class LoginForm extends Component {
  render() {
    return (


  <KeyboardAvoidingView
  behavior="padding"
  style={styles.container}>

    <TextInput
       placeholder = "ваш пароль"
       placeholderTextColor = '#fff'
       underlineColorAndroid = {'transparent'}
       style = {styles.input}
       secureTextEntry>
     </TextInput>

    <TouchableOpacity
      style= {styles.buttonContainer}
      onPress = {() =>
        this
        .props
        .navigation
        .navigate('MainScreen')}>
        <Text  style= {styles.buttonText}>Войти</Text>
    </TouchableOpacity>
</KeyboardAvoidingView>


);
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input : {
    backgroundColor : 'rgba(255, 255, 255, 0.2)',
    height : 40,
    marginBottom : 10,
    color : '#FFF',
    fontSize : 16
  },
  buttonContainer : {
    backgroundColor : '#00B241',
    paddingVertical : 10,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom : 30
  },
  buttonText : {
    textAlign : 'center',
    color : '#fff'
  }
});

Answer 1

我认为问题在于 LoginForm.js 嵌套在 login.js 内部。因此，当您调用 this.props.navigation.navigate('MainScreen') 时，loginForm.js 不知道 navigation 是什么，因为它属于 Login.js。

我相信将导航对象从login.js传递到loginForm.js将解决这个问题:

<LoginForm screenProps={{ navigation: this.props.navigation }} />