从零学React Native之04自定义对话框

本篇主要介绍： 
1. 自定义组件 
2. Alert 对话框

自定义对话框

之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进行扩展。

当我们点击注册的时候，可以弹出一个对话框，让用户确认一下，如下图：

接下来就来试试， 
首先在项目目录下创建ConfirmDialog.js 
代码如下:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,  // RN提供的组件
    View,
    BackAndroid
} from 'react-native';
import LoadMoreFooter from "./LoadMoreFooter";

let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;//宽
let totalHeight = Dimensions.get('window').height;//高

// 直接导出组件,不用写 module.exports=ConfirmDialog;了
export default class ConfirmDialog extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        alert('sasas');
        // onPress事件直接与父组件传递进来的属性挂接
        //numberOfLines 可显示3行
        // {'\r\n'}确 定 回车换行后跟着确定,为了克服Text组件不能垂直居中显示
        if(1){
            return (
                <View style={styles.confirmCont}>
                    <View style={styles.dialogStyle}>
                        <Text style={styles.textPrompt}>
                            {this.props.promptToUser}
                        </Text>

                        <Text style={styles.cancelButton}
                              onPress={this.props.userCanceled}
                              numberOfLines={3}>
                            {'\r\n'}取 消  2222
                        </Text>
                    </View>
                </View>
            );
        }
        else {

            return (
                <View style={styles.confirmCont}>
                    <View style={styles.dialogStyle}>
                        <Text style={styles.textPrompt}>
                            {this.props.promptToUser}
                        </Text>
                        <Text style={styles.yesButton}
                              onPress={this.props.userConfirmed}
                              numberOfLines={3}>
                            {'\r\n'}确 定 111
                        </Text>

                    </View>
                </View>
            );
        }

    }
}

const styles = StyleSheet.create({
    confirmCont: {  //全屏显示 半透明 可以看到之前的控件但是不能操作了
        position:'absolute',  //声明绝对定位
        top:0,
        width:totalWidth,
        height:totalHeight,
        backgroundColor:'rgba(52,52,52,0.5)'  //rgba  a0-1  其余都是十进制数
    },
    dialogStyle: {
        position:'absolute',
        left:totalWidth/10, // 定义Dilaog起点位置
        top:totalHeight*0.4,
        width:totalWidth*0.8,
        height:totalHeight*0.3,
        backgroundColor:'white'
    },
    textPrompt: {
        position:'absolute',
        top:10,
        left:10,
        fontSize:20,
        color:'black'
    },
    yesButton: {
        position:'absolute',
        bottom:10,
        left:10,
        width:totalWidth*0.35,
        height:totalHeight*0.12,
        backgroundColor:'grey',
        fontSize:20,
        color:'white',
        textAlign:'center'
    },
    cancelButton: {
        position:'absolute',
        bottom:10,
        right:10,
        width:totalWidth*0.35,
        height:totalHeight*0.12,
        backgroundColor:'grey',
        fontSize:20,
        color:'white',
        textAlign:'center'
    }
});

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image,
    Dimensions,
    TouchableOpacity,
    TextInput,
    ScrollView,
    Keyboard,
    Alert,
    InteractionManager,
    View
} from 'react-native';
import JPushModule from 'jpush-react-native';
import Main from './../../pages/main';
import Spinner from 'react-native-spinkit';
import { LOGIN_URL } from '../../component/Urls';
import { Login_Url } from '../../component/NewUrls';
import { timeoutPromise } from './../../component/TimeoutRequest';
import  MDG  from './../../component/ConfirmDialog';
var DeviceInfo = require('react-native-device-info');
import * as networkRequest from 'react-native-networkrequest'
var {height, width, scale, fontScale} = Dimensions.get('window');
// const instance = this;
var loading = false
class LoginNew extends Component {
    constructor(props) {
        super(props);
        const {navigator} = this.props;
        this.username = '';
        this.password = '';
        this.state = {
            visible: false,
            canLogin: true,
        };
        // load
        storage.load({
            key: 'userInfo',
            id: '1001'
        }).then(ret => {
          this.username = ret.username;
          this.password = ret.password;
          this.token = ret.token;
          this.userInfo = ret.userInfo;
          if (navigator) {
            this.props.navigator.replace({
                  name: 'Main',
                  params: {
                      token: DeviceInfo.getUniqueID(),
                      username: this.username,
                      password: this.password,
                      userInfo: this.userInfo,
                      badge: this.props.navigator.props.initialRoute.badge,
                  }
              })
          }

        }).catch(err => {
            switch (err.name) {
                case 'NotFoundError':
                  // TODO
                    break;
                case 'ExpiredError':
                    // TODO
                    break;
            }
        });
    }

    componentWillMount() {

    }
    componentDidMount() {
      InteractionManager.runAfterInteractions(() => {
        this.setState({renderPlaceholderOnly: false});
      });
    }
    componentWillUnmount() {
      this.timeout && clearTimeout(this.timeout);
    }

    render() {
        return (

                <View style={{ flexDirection: 'row',
                    flex:1,
                    borderBottomColor: 'lightgray',
                    borderBottomWidth: 1,
                    marginLeft: 30,
                    marginRight: 30,
                    marginTop: 10,
                    backgroundColor: '#FFFFFF',
                    shadowColor: '#ccc',
                    shadowOffset: {width: 1, height: 1},
                    shadowOpacity: 0.5,
                    shadowRadius: 1,
                    //justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor:'yellow'}}>
                    <MDG  style={  {flex: 1,

                         backgroundColor:'yellow'}} userConfirmed={this.userConfirmed}
                                    userCanceled={this.userCanceled}
                                    promptToUser={'使用'+this.state.inputedNum+'号码登录?'}/>

                </View>

        );
    }

    forgetPassword(navigator) {
        //const {navigator} = this.props;
        if (navigator) {
            navigator.push({
                name: 'ForgetPassword',

            })
        }
    }

    forgetPassword(navigator) {
        if (navigator) {
            navigator.push({
                name: 'ForgetPassword',

            })
        }
    }
    fetchDataWithURl(url,body=null) {
      if (!loading) {
        loading = true
        return timeoutPromise(20000,fetch(url, {
            method: 'POST',
            headers: {
              'Content-Type': 'text/html;charset=utf-8',
            },
            body: JSON.stringify(body)
          }))
          .then((response) =>{
            if (response.status == '200') {
              return  response.json()
             }else {
              return  response
             }
          })
          .then((responseJson) => {

             //Alert.alert('提示',`ceshi 100000`)

            loading = false
            if (responseJson.status&&responseJson.status != '200') {
              Alert.alert('提示',`网络错误,错误原因${responseJson.status}`)
              return
            }
            console.log(responseJson);
            this.setState({
              visible: false,
              canLogin: true,
            })
            switch (responseJson.resultCode) {
              case 0:
              // 设置推送别名
              JPushModule.setAlias('paike',()=>{},()=>{})
              JPushModule.setTags([this.username],()=>{},()=>{})
              // 登陆成功以后 储存用户信息
                storage.save({
                  key: 'userInfo',  //注意:请不要在key中使用_下划线符号!
                  id: '1001',
                  rawData: {
                    username: this.username,
                    password: this.password,
                    token: DeviceInfo.getUniqueID(),
                  },
          //         如果不指定过期时间，则会使用defaultExpires参数
          // 如果设为null，则永不过期
                  expires: null,
               });
              const {navigator} = this.props;
              if (navigator) {
                navigator.replace({
                      name: 'Main',
                      params: {
                          // token: DeviceInfo.getUniqueID(),
                          username: this.username,
                          password: this.password,
                          // userInfo: responseJson.data.list[0],
                      }
                  })
                }
                    break;
                case 2:
                    Alert.alert('提示','登陆失败，用户名不存在！')
                    break;
                case 1:
                    Alert.alert('提示','登陆失败，用户名或密码错误！')
                    break;
                default:
                    Alert.alert('提示','登陆失败，未知错误！')
              }

              })
          .catch((error) => {

            // console.error(error);
            this.timeout = setTimeout(
              ()=>{
                loading = false
                Alert.alert('提示','请求超时,请重试',[
                  {text: '确定', onPress: () => {}},
                ]);
              },50)
            // this.setState({visible: false});
          });
        // networkRequest.Post(20000,url,(responseData)=>{
        //   loading = false
        //   if (responseJson.status&&responseJson.status != '200') {
        //     Alert.alert('提示',`网络错误,错误原因${responseJson.status}`)
        //     return
        //   }
        //   console.log(responseJson);
        //   this.setState({
        //     visible: false,
        //     canLogin: true,
        //   })
        //   switch (responseJson.resultCode) {
        //     case 0:
        //     // 设置推送别名
        //     JPushModule.setAlias('paike',()=>{},()=>{})
        //     JPushModule.setTags([this.username],()=>{},()=>{})
        //     // 登陆成功以后 储存用户信息
        //       storage.save({
        //         key: 'userInfo',  //注意:请不要在key中使用_下划线符号!
        //         id: '1001',
        //         rawData: {
        //           username: this.username,
        //           password: this.password,
        //           token: DeviceInfo.getUniqueID(),
        //         },
        // //         如果不指定过期时间，则会使用defaultExpires参数
        // // 如果设为null，则永不过期
        //         expires: null,
        //      });
        //     const {navigator} = this.props;
        //     if (navigator) {
        //       navigator.replace({
        //             name: 'Main',
        //             params: {
        //                 // token: DeviceInfo.getUniqueID(),
        //                 username: this.username,
        //                 password: this.password,
        //                 // userInfo: responseJson.data.list[0],
        //             }
        //         })
        //       }
        //           break;
        //       case 2:
        //           Alert.alert('提示','登陆失败，用户名不存在！')
        //           break;
        //       case 1:
        //           Alert.alert('提示','登陆失败，用户名或密码错误！')
        //           break;
        //       default:
        //           Alert.alert('提示','登陆失败，未知错误！')
        //     }
        // },(timeOut)=>{
        //   loading = false
        //   // alert(timeOut)
        //   Alert.alert('提示',timeOut,[
        //     {text: '确定', onPress: () => {}},
        //   ]);
        // },'POST',body)

        }
    }

    login() {
      if (!this.username) {
        Alert.alert('提示','请输入用户名');
        return;
      }
      if (!this.password) {
        Alert.alert('提示','请输入密码');
        return;
      }
      if (this.state.canLogin) {
        const {navigator} = this.props;
//这段代码用于判断是否用输入用户密码来登录
      this.setState({
        visible: true,
        canLogin: false,
      })
      var token = DeviceInfo.getUniqueID();

      var params = `userName/${this.username}/password/${this.password}`
      console.log(Login_Url+params);
      this.fetchDataWithURl(Login_Url+params);
      }
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f5f9ff',
        opacity: 1,
    },
    loginView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        //backgroundColor: '#f5f9ff',
        //backgroundColor: 'red',
    },
    logoView: {
        width: width / 1.5,
        height: height / 7,
        justifyContent: 'center',
        alignItems: 'center',
        // backgroundColor: 'red',
    },
    logo: {
        marginBottom: height/6.5,
    },
    inputView: {
        flexDirection: 'row',
        borderBottomColor: 'lightgray',
        borderBottomWidth: 1,
        marginLeft: 30,
        marginRight: 30,
        marginTop: 10,
        backgroundColor: '#FFFFFF',
        shadowColor: '#ccc',
        shadowOffset: {width: 1, height: 1},
        shadowOpacity: 0.5,
        shadowRadius: 1,
        //justifyContent: 'center',
        alignItems: 'center',

    },
    icon: {
        width: 20,
        height: 20,
        justifyContent: 'center',
        marginLeft: 10,

    },
    button: {
        width: width/1.2,
        alignItems: 'center',
        justifyContent: 'center',
        height: 41,
        marginLeft: 30,
        marginRight: 30,
        marginTop: 20,
        paddingLeft:30,
        paddingRight:30,
        backgroundColor: '#529EF3',
        borderRadius: 3,
    },
    spinner: {
        marginBottom: 50,
        position: 'absolute',
        top: height / 15,
        left: width / 2 - 501,

    },
});

module.exports = LoginNew;

Android选项最多支持3个, 多余的直接忽略不会报错, IOS可以支持多个。style:’cancel’ 的选项再最后显示， 该样式对Android无效, Android第一个选项空间比较大。

https://blog.csdn.net/yulianlin/article/details/52129726