如何在本机反应中将道具从父组件传递到子组件？

Question

我正在设计一个简单的登录页面，该页面需要用户名和密码凭据，并且需要此数据进行身份验证检查，如果通过了，请转到第二个视图。 我的问题是我无法成功将用户名和密码值作为道具传递给子组件，即SecureView js

这是我已经编写的代码。 搜索了所有地方，但是未能找到适合我的问题的初学者友好解决方案。 请帮忙。

我的TextInput代码：

<TextInput
                  style={styles.input_username}
                  placeholder=" Username"
                  placeholderTextColor="#000000"
                  onChange={(event) => this.setState({username: event.nativeEvent.text})}
                  value={this.state.username}
              />

我的getInitialState（）方法：

  var login1 = React.createClass({
    getInitialState() {
      return {
        username: '',
        password: '',
            }
 },

我的onSubmitPressed（）函数：

onSubmitPressed() {
this.props.navigator.push({
id: 'SecureView',
passProps: {
  username: this.props.username
            }
          });
 },

我的index.android文件：

'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
} from 'react-native';

var Login1 = require('./app/screens/login1');
var SecureView = require('./app/screens/SecureView');

var loginsimple = React.createClass({
 render: function() {
  return (
  //<loginsimple />
  <Navigator
        style={styles.navigatorContainer}
        initialRoute={{id: 'Login1'}}
        renderScene={this.navigatorRenderScene}
        username={this.props.username}/>
    );
  },

  navigatorRenderScene(route, navigator) {
    //  _navigator = navigator;
switch (route.id) {
  case 'Login1':
    return (<Login1 navigator={navigator}
      {...route.passProps}
        title="Login1"/>);
  case 'SecureView':
    return (<SecureView navigator={navigator}
      {...route.passProps}
        title="SecureView"/>);
 }
 },
  });

  var styles = StyleSheet.create({
   navigatorContainer: {
flex: 1,

 }
});
 AppRegistry.registerComponent('loginsimple', () => loginsimple);

在我的SecureView js文件中，我编写了一个简单的文本元素，例如：

<Text> Welcome {this.props.username}!</Text> 

我的输出总是这样

Welcome !

将道具从我的第一个文件传递到SecureView文件的正确方法是什么？

Answer 1

在onSubmitPressed您传递的this.props.username未定义。 请改用this.state.username ，这是您通过this.setState(...)