使用 Stack Navigator 时道具未定义

Question

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

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

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

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

在我的登录屏幕中点击绿色按钮时，预期的结果是导航到我的主屏幕，但结果是 "props are undefined"

如果有人能帮助我解决这个问题并帮助我弄清楚问题出在哪里，我将不胜感激！

我的代码：

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
  }
});

LoginForm.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 }} />

Answer 2

将导航属性传递给 loginForm。对我有用

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

使用 Stack Navigator 时道具未定义

Props are undefind when using StackNavigator

javascript

navigation

react-native

stack-navigator

react-props