ReactNative开发——系统弹出框

前端之家收集整理的这篇文章主要介绍了ReactNative开发——系统弹出框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

ReactNative开发——系统弹出框

导入Alter组件

  1. import {Alert} from 'react-native'

使用Alert

  1. Alert.alert(
  2. "弹出框标题提示语","弹出框正文提示语",[
  3. {text: 'ask me later'},{text: '取消',onPress: this.userCanceled},{text: '确定',onPress: this.userConfirmed}
  4. ],{cancelable: true}
  5. );

相信大家可以直接看懂,其中 this.userCanceled 和 this.userCanceled 是我当前组件定义的方法

  1. userConfirmed() {
  2. this.setState((state) => {
  3. return {needToConfirm: false};
  4. });
  5.  
  6. //@R_367_404@面
  7. this.props.navigation.navigate('Waiting',{
  8. phoneNumber: this.state.inputedNum,userPw: this.state.inputedPW,});
  9. }
  10.  
  11. userCanceled() {
  12. this.setState((state) => {
  13. return {needToConfirm: false};
  14. });
  15. }

注意

如果我们的对调方法,有调用 this.setState 来更新自身的话,可能会有错,因为调用时候的 this,已经不指向我们的组件。所以我们最好在自己组件的构造方法中bind 一下自身的this。

例如:

  1. export default class Register extends Component {
  2.  
  3. static navigationOptions = {
  4. title: '注册页面'
  5. }
  6.  
  7. constructor(props) {
  8. super(props);
  9. this.userConfirmed = this.userConfirmed.bind(this);
  10. this.userCanceled = this.userCanceled.bind(this);
  11. }

猜你在找的React相关文章