在本机反应中从组件之间发送数据答案

【问题标题】：Send data from between components in react native在本机反应中从组件之间发送数据
【发布时间】：2016-12-09 05:05:05
【问题描述】：

我正在编写一个有 2 个屏幕的简单应用程序：登录和主。在文件 Login.js 中：

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

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user_name: '',
            password: ''
        };
    }
    render() {
        return (
            <View>
                <Text>Username:</Text>
                <TextInput
                    onChangeText={(text) => {
                    this.setState({user_name: text});
                }}/>
                <Text>Password:</Text>
                <TextInput
                    secureTextEntry={true}
                    onChangeText={(text) => {
                    this.setState({password: text});
                }}/>
                <View style={styles.wrapper}>
                    <Button
                        onPress={this.props.click}
                        title="Login"
                        accessibilityLabel="Login to system"/>
                </View>
            </View>
        );
    }
}

Login.propType = {
    user: React.PropTypes.string.isRequired,
    pass: React.PropTypes.string.isRequired
}

const styles = StyleSheet.create({
    wrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around'
    }
});

登录成功时，我有用于 renderScene 的 Main.js。在文件 index.android.js 中，我为 AppRegistry 声明了类 RouteTest：

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  Alert,
  Button
} from 'react-native';
import Main from './Screen/Main.js';
import Login from './Screen/Login.js';
class RouteTest extends Component {
  renderScene(route, navigator) {
    switch (route.name) {
      case 'main':
        return (<Main />);
      case 'login':
        return (<Login
          click={()=>{ 
            if(this.state.user_name == 'abc' && this.state.password == '123') { 
              navigator.push({name: 'main'}) 
            } else {
              Alert.alert("Login failed");
            }
          }}/>);
    }
  }
  render() {
    return (<Navigator
      initialRoute={{
      name: 'login'
    }}
      renderScene={this.renderScene}/>);
  }
}

AppRegistry.registerComponent('RouteTest', () => RouteTest);

当我从类 Login 的 TextInput 中获取用户名和密码时，我使用： this.state.user_name 但不起作用。我的问题是：如何在类 RouteTest 的登录类中获取用户输入的值。谢谢。

【问题讨论】：

这似乎是您的新手，我建议您在熟悉 React 时查看状态管理库，例如 Redux。
哦，谢谢你的建议。如果不使用 Redux，我还有其他方法吗？

标签： react-native

【解决方案1】：

您可能想使用react redux。使用它，您可以快速简单地从任何地方访问任何内容。

它有点难以设置，但是一旦你设置了它就很容易管理，你可以在应用程序的任何地方获取信息，请参考这个链接：Getting started with Redux。

它涵盖了使用 redux 的不同方面。从一个简单的计数器示例开始。它还涉及如何管理可以从应用程序的任何位置访问结果的 api 调用。

更新：更快的解决方案是使用 React Context API。这是practical example。如果您想要完整的状态管理，请改用 redux

祝你好运！

【讨论】：

【解决方案2】：

试试看https://facebook.github.io/react/docs/refs-and-the-dom.html

基本上，您可以使用引用集从您的RouteTest 访问Login 的props，例如

<Login     
ref={ref => this._login = ref}
/>

之后你可以像这样访问道具：this._login.xxx

【讨论】：