Question

我正在创建注册表单，并尝试使用电话号码登录，该电话号码返回我要在模式窗口中键入的验证码。我想在单击注册按钮后打开模式窗口。我已将modal的visible属性发送为true，但未在屏幕上显示。我已经检查了显示我为“ true”的可见性属性的控制台值，我可以理解我的模态将成功运行，但它没有执行任何操作。也没有错误。

我的代码：

signIn = () => {

  const { name,  password, confirmPassword, mobile } = this.props;

  const object = { confirmPassword, password };
  const error = Validator('name', name)
    || Validator('password', password)
    || PasswordValidator(object)
    || Validator('mobile', mobile);

 const mobileNo = '+91'+mobile;

  if (error != null) {

    Alert.alert('Error', error);
  } else {
    console.log('else');
    const mobile = this.props.mobile;

    const userRef = firebase.database().ref(`/users/`);

    userRef.once('value', function(snapshot) {

      //If user is existed redirect to login page
      if(snapshot.val().mobile == mobile){
        Alert.alert('Error', 'Phone number is already registered! Please login with your credentials');
          NavigationService.navigate('Login');
      }

    });

  }     
    // If user is not exist signup
    firebase.auth().signInWithPhoneNumber(mobileNo)
      .then(confirmResult => this.setState({ confirmResult, message: 'Code has been sent!' },
      this.renderVerificationCodeInput()
    ))
      .catch(error => this.setState({ message: `Sign In With Phone Number Error: ${error.message}` }));
};


renderVerificationCodeInput() {

       console.log('code');
       const { codeInput } = this.state;
       this.setModalVisible(!this.state.modalVisible);
       console.log(this.state.modalVisible);

  <View style={{  position: 'absolute', top: 0, left: 0, right: 0, bottom: 0  }}>
  <Modal
    animationType="slide"
    transparent={false}
    visible={this.state.modalVisible}
    onRequestClose={() => {
      console.log('Modal has been closed');
    }}
  >
  {console.log(this.state.modalVisible)}
   <View >
    <Text>Enter verification code below:</Text>
     <Input
       autoFocus
      style={{ height: 40, marginTop: 15, marginBottom: 15 }}
       onChangeText={value => this.setState({ codeInput: value })}
       placeholder={'Code ... '}
       value={codeInput}
     />

     <Button title="Confirm Code" color="#841584" onPress={this.confirmCode} />
   </View>

  </Modal>

</View>
}

Answer 1

我不知道所有的代码，如果不是，则需要添加状态

state = {modalVisible: false}

并替换this.setModalVisible(!this.state.modalVisible); 到this.setState({modalVisible:!this.state.modalVisible)

反应本机模式无法打开

1 个答案: