全球国家反应本土

时间:2017-12-12 19:51:48

标签: reactjs react-native native

我只是开发了一些带有本机的应用程序,在我的代码中,我只是接收手机处于状态。如何在全局设置此状态并在另一个屏幕中使用,如OTP屏幕如何在另一个屏幕中使用它。我使用反应原生路由器通量。我可以在下一个屏幕的第二个变量中发送这些数据吗?

反应原生.049
phpstorm
android studio

export default class Login extends Component{
  constructor(props) {
    super(props);
    this.state = {mobile: ''};



    this._OtpButton = this._OtpButton.bind(this);

}



  _OtpButton() {

            fetch("https://2d44f003.ngrok.io/mobileWebViews/v1/sendOtp/", {
                method: "POST",
                headers: {
                    Accept: "application/json",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                     mobile:this.state.mobile,
                     type:'otp'
                })
            })
                    .then(response => response.json())
                    .then(responseJson => {
                        if(responseJson.status.toString() === 'ok'){
                            // this.global.mobile = mobile;

                            Alert.alert('پیامک ارسال شد');
                            Actions.replace('OTP');


                        }else if(responseJson.status.toString() === 'fail') {
                            Alert.alert(responseJson.message.toString());
                        }else{
                            Alert.alert(responseJson.message.toString());
                        console.log(responseJson.message)
                        }

                    })
                    .catch(error => {
                        Alert.alert("Error"+JSON.stringify(error));
                        // console.error(error);
                    })
        }


  render() {


    return (

       <View style={styles.container}>
       <Image source={require("./assets/img/login.jpg")} 
       style={{
                        flex: 1,
                        position: 'absolute',
                        width: '100%',
                        height: '100%',
                        justifyContent: 'center',
                    }}

                    />

              <View style={styles.LoginBox}>
                  <Text style={styles.LoginTitel}>   ورود به بوتیک</Text>
                          <View style={styles.inputGroups}>

                            <TextInput
                              style={styles.inputText}
                              underlineColorAndroid='transparent'
                              placeholder="شماره موبایل (مثال ۰۹۱۲۱۲۳۴۵۶۷)"
                              keyboardType={'numeric','number-pad'}
                              onChangeText={(mobile) => this.setState({mobile})}

                            />

                        </View>
                        <TouchableOpacity activeOpacity={.8} onPress={this._OtpButton}>
                        <Text style={styles.ButtonEnter}>دریافت رمز از طریق پیامک</Text>
                        </TouchableOpacity>

                        <TouchableOpacity activeOpacity={.8} onPress={()=>Actions.replace('Login2')}>
                        <Text style={styles.ButtonPass}>ورود با نام کاربری و پسورد</Text>
                        </TouchableOpacity>

                        <Text> </Text>
                        <TouchableOpacity activeOpacity={.8} onPress={()=>Actions.replace('register')} >
                        <Text style={styles.forgetPass}>ثبت نام فروشگاه جدید</Text>
                        </TouchableOpacity>

                </View>
                <Image/>

      </View>
    );
  }
}

1 个答案:

答案 0 :(得分:2)

是的,你可以在场景之间传递道具。

这是使用react-native-router-flux:

完成此任务的方法
Actions.yourSceneName({ whatever: responseFromServer });

然后在下一个场景中,您将使用:

访问传递的值
this.props.whatever

如果要全局保存并且不使用MobX或Redux等状态管理库,可以使用AsyncStorage将其保存到手机内存中。这看起来像是:

AsyncStorage.setItem('whatever', JSON.stringify({ valToBeSaved }));

要检索该值,您可以执行以下操作:

 AsyncStorage.getItem('whatever');