ReactNative开发——系统弹出框

ReactNative开发——系统弹出框

导入Alter组件

import {Alert} from 'react-native'

使用Alert

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

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

userConfirmed() {
    this.setState((state) => {
        return {needToConfirm: false};
    });

    //跳转页面
    this.props.navigation.navigate('Waiting', {
        phoneNumber: this.state.inputedNum, userPw: this.state.inputedPW,
    });
}

userCanceled() {
    this.setState((state) => {
        return {needToConfirm: false};
    });
}

注意

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

例如：

export default class Register extends Component {

    static navigationOptions = {
        title: '注册页面'
    }

    constructor(props) {
        super(props);
        this.userConfirmed = this.userConfirmed.bind(this);
        this.userCanceled = this.userCanceled.bind(this);
    }