React Native 返回按钮点击

Question

我对 React 原生开发还很陌生。我正在尝试处理一些基本的身份验证。主页 (App.js) 首先检查它是否可以在我的例子中找到任何 Asyncstorage 参数 access_token。如果它找不到任何内容，它将重定向到登录页面，否则它将带您到仪表板。

我的问题是，用户在 LOGIN.JS 中单击登录后（发送到服务器的数据和接收到的令牌）令牌随后保存在异步存储密钥中，之后这应该带你回到 (App.js) 但它没有。

注意：我没有包含完整的渲染代码，例如：TextInput

APP.JS

import Login from './src/compoments/login/Login'
import Dashboard from './src/compoments/dashboard/Dashboard'
export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isTokenValid: false,
      access_token: '',

    }
  }


  render() {
    console.disableYellowBox = true;



    this.loadToken();
    const isLoggedIn = this.state.isTokenValid;
    console.log("Logged IN : ", isLoggedIn);

    if (isLoggedIn) 
      return <Dashboard     />;
    else 
      return <Login 
          onLoginPress={() => this.setState({isLoggedIn: true})}
        />;




  }

  loadToken(){

    retrieveData = async () => {
      try {
        const value = await AsyncStorage.getItem('access_token');
        console.log("TOKEN", value);
        if (value !== null) {
          this.setState({access_token : value});
          this.setState({isTokenValid : true});
          console.log(value);
        }else{

          this.setState({isTokenValid : false});

        }
      } catch (error) {
        console.log("ERROR : ", error)
      }
    }
  }

}

LOGIN.JS

export default class Login extends React.Component {
    constructor(props){
        super(props);
        this.state = {
          username: '',
          password: '',
          param3: '',
          serverResponse:'',
          isLoggingIn: false,
          isLoggedIn: false
        }
      }

 render() {
return (



  <View style={styles.container}>


                    <TouchableOpacity style={styles.buttonContainer} 
                                        onPress={this.getLoginApi.bind(this)}>
                                <Text  style={styles.buttonText}>LOGIN</Text>


                    </TouchableOpacity> 


            {this.state.isLoggingIn && <ActivityIndicator size="large" color="#0000ff" />}


  </View>



);


getLoginApi(){

  this.setState({ isLoggingIn: true, message: '' });


    var formData = new FormData();
    formData.append('param1', this.state.username);
    formData.append('param2', this.state.password);
    formData.append('param3', this.state.param3); 

    var request = new XMLHttpRequest();
    request.onreadystatechange = (e) => {
      if (request.readyState !== 4) {
        return;
      }

      if (request.status === 200) {

        this.setState({ isLoggingIn: false })
        const status = this.getJSONValue(request.responseText,"status");
        console.log('SERVER RESPONSE : ',  status);
        if(status=="success"){

            const token = this.getJSONValue(request.responseText,"token");
            console.log("ACCESS TOKEN : ", token);
            AsyncStorage.setItem('access_token', token);
            this.setState({isLoggedIn: true});
            this.props.onLoginPress();   
        }



      } else {
        this.setState({ isLoggingIn: false })
        console.warn('error');
      }
    };

    request.open('POST', 'https://bla.com/test.php');
    request.send(formData);


}



 getJSONValue(jsonObj, findKey){

   let response = '';

    JSON.parse(jsonObj, (key, value) => {

        if(key==findKey){

           response = value;

        }

      });  
      return response;
}

}

Answer 1

您的代码之所以不起作用，是因为在 render App.js 内部，您使用 state isTokenValid 来检查要渲染的组件。

 const isLoggedIn = this.state.isTokenValid;

但是当你将道具发送到Login.js

<Login 
  onLoginPress={() => this.setState({isLoggedIn: true})}
/>

您发送了 onLoginPress 道具，但您将状态 isLoggedIn 设置为 true.. 因此，它创建了一个名为 isLoggedIn 的新状态。它没有将您的 const 的值更改为 true，因为 state 和 const 是不同的。

改成这个应该就可以了

<Login 
      onLoginPress={() => this.setState({isTokenValid: true})}
    />

React Native 返回按钮点击

React Native go back on button click

android

ios

react-native

react-native-android

react-native-ios

APP.JS

LOGIN.JS