react-native - 如何将props从父组件传递给子组件？

Question

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

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

我的文本输入代码：

<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(...) 设置的内容