>

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에서 user_name과 password를 얻으면 다음을 사용합니다. this.state.user_name하지만 작동하지 않습니다. 그리고 내 질문은 : RouteTest 클래스의 Login 클래스에서 사용자 입력 값을 얻는 방법입니다. 감사합니다.


  • 답변 # 1

    react redux를 사용하고 싶을 수도 있습니다. 이 u를 사용하면 어디서나 빠르고 간단하게 무엇이든 할 수 있습니다.

    설정하기가 조금 어렵지만 일단 관리하기가 쉽고 앱의 어느 곳에서나 정보를 얻으려면 다음 링크를 참조하십시오 : Redux 시작하기

    redux 사용의 다양한 측면을 다룹니다. 간단한 카운터 예부터 시작합니다. 또한 앱 어디에서나 결과에 액세스 할 수있는 API 호출을 관리하는 방법도 다룹니다.

    업데이트: 훨씬 빠른 해결책은 React Context API를 사용하는 것입니다. 여기 실제적인 예가 있습니다. 완전한 상태 관리를 원한다면 대신 redux를 사용하십시오

    행운을 빕니다!

  • 답변 # 2

    https://facebook.github.io/react/docs/refs-and-the-dom.html을보십시오

    기본적으로 props 에 액세스 할 수 있습니다  와이즈 비츠  당신의 Login 에서  참조 설정 사용 (예 :

    RouteTest
    
    

    그러면 다음과 같은 소품에 접근 할 수 있습니다 : <Login ref={ref => this._login = ref} />

    this._login.xxx

관련 자료

  • 이전 javascript - JS에서 regexrcom 일치와 regrex 일치가 다른 regrex를 사용하여 문자열을 배열로 나열하는 방법은 무엇입니까?
  • 다음 python - cv2 문제 - numpycoremultiarray를 가져 오지 못했습니다