1
私は単純なアプリケーションを書いています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を宣言：私はクラスログインのTextInputコントロールからuser_nameとパスワードを取得すると、私が使用して
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);： this.state.user_nameをしかし働いていない。 そして、私の質問は、クラスRouteTestのクラスLoginでユーザーの入力値を取得する方法です。 ありがとうございます。
これはあなたの新しいもののようですが、私はあなたが反応に慣れているときにReduxのような状態管理ライブラリを調べることを提案します。 – James111
ああ、その提案に感謝します。 Reduxを使用しない場合、別の方法がありますか？ – XuHo