Question

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

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

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

此处我的应用的屏幕和代码

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

如果有人可以帮助我解决这个问题并帮助我找出问题所在，我会非常感激！

我的代码：

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，我在那里描述了我有onPress方法的InputText和TouchableOpacity，它必须导航我到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} />

使用StackNavigator

2 个答案: