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

之前我们介绍了RN相关的知识：
是时候了解React Native了
从零学React Native之01创建第一个程序
从零学React Native之02状态机
从零学React Native之03页面导航

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

自定义对话框

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

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

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

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

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 {
    render() {
        // onPress事件直接与父组件传递进来的属性挂接
        //numberOfLines 可显示3行
        // {'rn'}确 定 回车换行后跟着确定,为了克服Text组件不能垂直居中显示
        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}>
                        {'rn'}确 定
                    </Text>
                    <Text style={styles.cancelButton}
                          onPress={this.props.userCanceled}
                          numberOfLines={3}>
                        {'rn'}取 消
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    confirmCont: {  //全屏显示 半透明 可以看到之前的控件但是不能操作了
        position:'absolute',//声明绝对定位
        top:0,width:totalWidth,height:totalHeight,backgroundColor:'rgba(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,width:totalWidth*0.35,height:totalHeight*0.12,backgroundColor:'grey',color:'white',textAlign:'center'
    },cancelButton: {
        position:'absolute',right:10,textAlign:'center'
    }
});

可以看到,上面的布局使用绝对布局,通过把Text和View拼装到一起组成了对话框的组件,最外层的View是一个全屏的遮罩.
颜色值是rgba,前三个数的范围 0-255 分别表示红色,绿色和蓝色,最后一位数范围是0-1 1表示完全不透明,0表示完全透明。颜色值也可以 用#开头后面跟着6位16进制的数表示，没两位表示一种颜色,分别为RGB。

我们的对话框组件用到了几个属性,如:{this.props.promptToUser} 这些属性需要在使用该组件的时候传递进来。

挂载组件

接下来我们需要修改上一篇文章中用到的RegisterLeaf.js文件,这个文件我们之前用来创建注册页面。
因为涉及到了对话框的显示和隐藏， 我们需要添加一个新的状态机变量。该变量为了控制对话框的显示与隐藏。

import React,{ Component } from 'react';
import {
    AppRegistry,//框架提供的API
    StyleSheet,// RN提供的组件
    View,TextInput // 记得引入组件
} from 'react-native';
//let是更完美的var
let Dimensions = require('Dimensions');// 宽高
let totalWidth = Dimensions.get('window').width;  //声明了三个变量,根据屏幕动态变化
let leftStartPoint = totalWidth * 0.1;
let componentWidth = totalWidth * 0.8;
//导入对话框
let ConfirmDialog=require('./ConfirmDialog');

class RegisterLeaf extends Component {

    //构造函数,组件创建的时候会执行
    constructor(props) {
        super(props); //必须有这句代码 父组件向子组件传递属性,比如styles属性等
        // 声明状态机的初始值
        this.state = {
            inputedNum: '',inputedPw: '',needToConfirm: false //导入新的状态机
        };
        // ES6
        this.userPressConfirm=this.userPressConfirm.bind(this);
        //方法不绑定 其它组件没法调用
        this.userConfirmed=this.userConfirmed.bind(this);
        this.userCanceled=this.userCanceled.bind(this);
    }
    // 定义函数
    updateNum(newText) {
        this.setState((state)=> { return { inputedNum: newText } }); } // 定义函数 updatePW(newText) { this.setState(()=> { // 用不到的参数也可以不用写 return { inputedPw: newText } }); } userPressConfirm(){ this.setState(()=>{ return { needToConfirm:true } }); } // 对话框取消时如何处理 userCanceled(){ this.setState({needToConfirm:false}); console.log("userPressConfirm"); } // 对话框确定 userConfirmed(){ this.setState({needToConfirm:false}); this.props.navigator.push({ phoneNumber:this.state.inputedNum,userPW:this.state.inputedPw,name:'waiting' }) } renderWithDialog(){ return( <View style={styles.container}> <TextInput style={styles.numberInputStyle} keyboardType={'phone-pad'} placeholder={'请输入手机号'} onChangeText={(newText)=>this.updateNum(newText)}/> <Text style={styles.textPromptStyle}> 您输入的手机号：{this.state.inputedNum} </Text> <TextInput secureTextEntry={true} style={styles.passwordInputStyle} placeholder='请输入密码' onChangeText={(newText)=>this.updatePW(newText)}/> <Text style={styles.bigTextPrompt} onPress={this.userPressConfirm}> 注 册 </Text> <ConfirmDialog userConfirmed={this.userConfirmed} userCanceled={this.userCanceled} promptToUser={'使用'+this.state.inputedNum+'号码登录?'}/> </View> ) } // 绘制渲染的控件 render() { // 根据不同的状态 做相应的绘制，当需要绘制对话框时，调用renderWithDialog if(this.state.needToConfirm) return this.renderWithDialog(); return ( /*(newText)=>this.updateNum(newText) 它将收到的字符串为参数调用当前组件的updateNum函数,并且将updateNum函数的返回值返回 当前函数在输入框文本变化的时候会调用 语句可以改成 this.updateNum 但一定不要写成 this.updateNum(newText) 因为有右箭头函数的时候newText是形式参数 没有箭头函数的时,newText就没有定义 */ <View style={styles.container}> <TextInput style={styles.numberInputStyle} keyboardType={'phone-pad'} placeholder={'请输入手机号'} onChangeText={(newText)=>this.updateNum(newText)}/> <Text style={styles.textPromptStyle}> 您输入的手机号：{this.state.inputedNum} </Text> <TextInput secureTextEntry={true} style={styles.passwordInputStyle} placeholder='请输入密码' onChangeText={(newText)=>this.updatePW(newText)}/> <Text style={styles.bigTextPrompt} onPress={this.userPressConfirm}> 注 册 </Text> </View> ); } } // 样式 const变量只能在声明的时候赋值一次 const styles = StyleSheet.create({ //各个组件都没有定义高度,父View设置了flex1,他会沾满整个高度,子组件没有设置会包裹内容 container: { flex: 1,//表示宽高会自动扩展 backgroundColor: 'white' },numberInputStyle: { top: 20,// top left表示从父组件的顶端(左侧) 向下(向右) 多少位置显示 left: leftStartPoint,// height:30,// IOS开发需要加上该高度 width: componentWidth,backgroundColor: 'gray',fontSize: 20 },textPromptStyle: { top: 30,left: leftStartPoint,// // height:30,// IOS开发需要加上该高度 因为IOS中TextInput不会自动设置高度 width: componentWidth,passwordInputStyle: { top: 50,width: componentWidth,bigTextPrompt: { top: 70,color: 'white',textAlign: 'center',//位置居中显示 fontSize: 60 } }); module.exports=RegisterLeaf;

可以看到，我们渲染自定义对话框时， 给对话框传递了三个属性其中userConfirmed={this.userConfirmed},userCanceled={this.userCanceled}两个属性对应的是父组件的函数，通过将子组件属性初始化为父组件的某个函数，打通了子组件向父组件通信的通道，这就是一个无参数的函数。但在需要的情况下，子组件可以通过有参数的函数向父组件传递数据。

Android中返回键处理

首先在RegisterLeaf组件中再增加一个函数:

//告诉对话框什么时候时候需要拦截返回事件
    tellConfirmDialogItsStatus() {
        return this.state.needToConfirm;
    }

记得在构造方法中绑定this

//构造函数,组件创建的时候会执行
    constructor(props) { super(props); //... this.tellConfirmDialogItsStatus=this.tellConfirmDialogItsStatus.bind(this); }

然后在挂接ConfirmDialog时再增加一个属性 amIStillAlive,如下:

<ConfirmDialog userConfirmed={this.userConfirmed}
                         userCanceled={this.userCanceled}
                         amIStillAlive={this.tellConfirmDialogItsStatus}
                         promptToUser={'使用'+this.state.inputedNum+'号码登录?'}/>

当然我们还需要在ConfirmDialog时再增加两个生命周期的函数,再组件挂载时监听返回键按下的事件,组件移除时,取消监听(貌似RN还有Bug,取消监听还不能用)

//挂载时
    componentDidMount() {
        //这个位置并不是多余的，见后面说明
        var amIStillAlive=this.props.amIStillAlive;
        BackAndroid.addEventListener('ConfirmDialogListener',()=>{ if(amIStillAlive()){ this.props.userCanceled(); return true; } return false; }) } componentWillUnMount() { //RN bug 无法取消监听 BackAndroid.removeEventListener('ConfirmDialogListener'); } 

BackAndroid API的工作机制是,当挂接多个Listener后,用户按下返回键时,多个Listener都会监听到返回键被按下事件,执行的顺序就是添加的顺序,不会因为前面的处理函数处理了返回事件,后面的处理函数就不会执行了。这些处理函数都执行完后，只要有一个处理函数返回了true，返回键被按下事件就不会交给Android框架处理,也就是说没办法退出。

注意componentDidMount()监听处理函数中判断条件的取值,并没有直接使用this.props.amIStillAlive(),而是先用一个变量获取属性的值,然后再将这个变量值传入。
这个位置并没有多余，因为监听处理函数在ConfirmDialog中只是描述了它的实现,当它真正被执行时,执行的上下文并不在ConfirmDialog中。也就是说，当它被执行时，如果运行this.props.amIStillAlive() 语句,它会发现找不到this.props.amIStillAlive这个变量。而amIStillAlive却是可以找到的,并且可以通过这个函数调用RegisterLeaf中相应的函数得到正确的条件值。

属性声明

因为自定义组件时可以复用了,我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件,但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。

export default class ConfirmDialog extends Component {
  //....
}
ConfirmDialog.propTypes = {
    userConfirmed: React.PropTypes.func.isRequired,userCanceled: React.PropTypes.func.isRequired,amIStillAlive: React.PropTypes.func.isRequired,promptToUser:React.PropTypes.string.isRequired
};

上面声明的属性都是 isRequired， 如果不传递这些属性程序会在开发阶段出现警告。

当然除了上面两种类型,还可以约束其它几种类型,属性确认的语法也有好几种,大家可以参考我的另一篇文章 React Native声明属性和属性确认

我们还可以给属性指定一个默认值,当没有传递该属性时使用默认值,如:

ConfirmDialog.defaultProps = { promptToUser: '确定吗?'
};

同时记得要将指定 promptToUser为必须的’isRequired’ 去掉.

Alert Api对话框

弹出对话框是程序开发中经常需要使用的UI手段,React Native也为开发者提供了Alert API,没有特殊要求可以使用Alert Api弹出对话框,这种对话框和原生代码的对话筐样式一样,Android和IOS样式有些区别。
首先在RegisterLeaf.js中导入Alert组件

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

然后修改userPressConfirm()代码:

//使用Alert Api
    userPressConfirm() {
        Alert.alert(
            '标题','正文',[
                {text:'确定',onPress:this.userConfirmed},{text:'取消',onPress:this.userCanceled,style:'cancel'},{text:'额外选项一',onPress:this.userCanceled},{text:'额外选项二',onPress:this.userCanceled}
            ]
        );
    }

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

IOS弹出对话框,点击对话框周围是无法取消对话框的,但是Android可以取消，如果Android想做成和ios一样的效果，需要在RN 0.33版本以上。在对话框上添加如下代码：

userPressConfirm() {
        Alert.alert(
            '标题',onPress:this.userCanceled}
            ],{
                cancelable: false
            }
        );
    }

更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。