React Native自定义组件——弹出框

这里用到的其实是一个新的场景页面 而不是像原生的组件一样 悬浮在页面之上，它实现的原理是从新绘制一个带弹出框样式的页面，除了弹出框之外都是灰色的，且将要显示弹出框页面的布局完全移植过来。

这里通过 BackAndroid API 实现了点击返回键 自定义对话框消失的效果

BackAndroid API 的工作机制是，当挂接多个Listener 后，用户按下返回键时，多个Listener 都会监听到返回键按下事件，并且他们的处理函数都会被执行，执行的顺序是天津的顺序，这些处理函数都执行后，只要有一个处理函数返回了true（表示返回键被按下事件已经被处理），返回键被按下事件就不会交个Android框架处理，也就是说，应用程序没有 办法退出。

程序的入口文件  index.android.js

import React, {Component} from 'react';
import {AppRegistry,Navigator,BackAndroid,Alert} from 'react-native';

import RegisterLeaft from './RegisterLeaft';
import WaitingLeaft  from './WaitingLeaft';

export default class NavigatorModule extends Component {

constructor (props) {
super(props)
this.handleBack = this._handleBack.bind(this) // 返回一个绑定好this的方法并存储于当前实例中
}

configureScene(router){
return Navigator.SceneConfigs.FadeAndroid;
}

renderScene(router,navigator){
switch(router.name) {
case  "register":
return <RegisterLeaft navigator={navigator}/>
case  "waiting" :
return <WaitingLeaft
phoneNumber = {router.phoneNumber}
userPW = {router.userPW}
navigator={navigator}
/>
}
}
componentDidMount() {
BackAndroid.addEventListener("NoviModuleListener",this.handleBack);
}

_handleBack () {
const nav=this.navigator;
if(nav!=null){
const routers=nav.getCurrentRoutes();
if(routers.length>1){
nav.pop();
return true;
}
}
return false;
}

componentWillUnount(){
BackAndroid.removeEventListener("NoviModuleListener",this.handleBack);
}

render(){
return(
<Navigator
ref={nav => {this.navigator=nav}}
initialRoute={{name:'register'}}
configureScene={this.configureScene}
renderScene ={(route,navigator) =>this.renderScene(route,navigator)}
/>
);
}
}

AppRegistry.registerComponent('AwesomeProject', () => NavigatorModule);

对话框组件 ConfirmDialog.js

import React, {Component} from 'react';
import {AppRegistry,View,Text,StyleSheet,BackAndroid,Alert} from 'react-native';

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

export default class ConfirmDialog extends Component{

constructor (props) {
super(props)
this.newHandleBack = this._newHandleBack.bind(this) // 返回一个绑定好this的方法并存储于当前实例中
}
render(){
return(
<View style={styles.ConfirmContent}>
<View style={styles.dialogStyle}>
<Text style={styles.textPrompt}>
{this.props.promptToUser}
</Text>
<Text style={styles.yesButton}
onPress = {()=>{this.props.userConfirmed()}}
>
{'\r\n'}确定
</Text>
<Text style={styles.cancelButton}
onPress = {()=>{this.props.userCanceled()}}
>
{'\r\n'}取消
</Text>
</View>
</View>
);
}

componentDidMount() {
let amIStillAlive = this.props.amIStillAlive;
let navigator =this.props.navigator;
BackAndroid.addEventListener("ConfirmDialogListener",this.newHandleBack);
}
componentWillUnmount(){
BackAndroid.removeEventListener("ConfirmDialogListener",this.newHandleBack);
}

_newHandleBack () {
let amIStillAlive = this.props.amIStillAlive();
let navigator =this.props.navigator;
if(amIStillAlive==true){
this.props.userCanceled();
return true;
}
return false;
}
}

let styles = StyleSheet.create({
ConfirmContent:{
position:"absolute",
top:0,
width:totalWidth,
height:totalHeight,
backgroundColor:'rgba(52,52,52,0.5)'
},
dialogStyle:{
position:"absolute",
top:totalHeight * 0.4,
left:totalWidth / 10,
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.1,
backgroundColor:'gray',
fontSize:20,
color:'white',
textAlign:'center'
},
cancelButton:{
position:'absolute',
bottom:10,
right:10,
width:totalWidth*0.35,
height:totalHeight*0.1,
backgroundColor:'gray',
fontSize:20,
color:'white',
textAlign:'center'
}
}
);

注册页面 RegisterLeaft.js 

import React, {Component} from 'react';
import {AppRegistry,StyleSheet, Text, View, TextInput,Alert,Navigator} from 'react-native';

import ConfirmDialog  from './ConfirmDialog';
let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;
let leftStartPoint = totalWidth * 0.1;
let componentWidth = totalWidth * 0.8;

export default class RegisterLeaft  extends Component {

constructor(props) {
super(props);
this.state={
inputedNum:"",
inputedPW:"",
needToConfirm:false
};
}

render() {
if(this.state.needToConfirm==true)
return this.renderWithDialog();
return (
<View style = {styles.container} >
<TextInput style = {styles.numberInputStyle}
placeholder = {'请输入手机号:'}
onChangeText={(inputedNum)=>this.setState({inputedNum})}
/>
<Text style = {styles.textPromptStyle} >
您输入的手机号：{this.state.inputedNum}
</Text >
<TextInput style = {styles.passwordInputStyle}
placeholder = { '请输入密码' }
onChangeText={(inputedPW)=>this.setState({inputedPW})}
password = 'true'
/>
<Text style = {styles.bigTextPrompt}
onPress = {()=>{this.userPressConfirm()}}
>
确定
</Text>
</View>);
}

renderWithDialog(){
return (
<View style = {styles.container} >
<TextInput style = {styles.numberInputStyle}
placeholder = {'请输入手机号:'}
onChangeText={(inputedNum)=>this.setState({inputedNum})}
/>
<Text style = {styles.textPromptStyle} >
您输入的手机号：{this.state.inputedNum}
</Text >
<TextInput style = {styles.passwordInputStyle}
placeholder = {'请输入密码'}
onChangeText={(inputedPW)=>this.setState({inputedPW})}
password = 'true'
/>
<Text style = {styles.bigTextPrompt}
onPress ={()=>{this.userPressConfirm()}}
>
确定
</Text>
<ConfirmDialog
userConfirmed={()=>{this.userConfirmed()}}
userCanceled = {()=>{this.userCanceled()}}
amIStillAlive= {()=>{this.tellConfirmDialogItsStatus()}}
promptToUser ={'使用'+this.state.inputedNum+'号码登录?'}
>
</ConfirmDialog>
</View>);
}

userPressConfirm(){
this.setState({needToConfirm:true});

}
userCanceled(){
this.setState({needToConfirm:false});
}
userConfirmed(){
this.setState({needToConfirm:true});
this.props.navigator.push({
phoneNmuber:this.state.inputedNum,
userPW:this.state.inputedPW,
name:"waiting"
});
}

tellConfirmDialogItsStatus(){
return this.state.needToConfirm;
}

}

let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white'
},
numberInputStyle: {
top: 20,
left: leftStartPoint,
width: componentWidth,
backgroundColor: 'gray',
fontSize: 20

},
textPromptStyle: {
top: 30,
left: leftStartPoint,
width: componentWidth,
fontSize: 20
},
passwordInputStyle: {
top: 50,
left: leftStartPoint,
width: componentWidth,
backgroundColor: 'gray',
fontSize: 20
},
bigTextPrompt: {
top: 70,
left: leftStartPoint,
width: componentWidth,
backgroundColor: 'gray',
color: 'white',
textAlign: 'center',
fontSize: 40
}
});

等待页面 WaitingLeaft.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, TextInput} from 'react-native';

export default class WaitingLeaft extends Component{

render() {
return (
<View style = {styles.container} >
<Text style = {styles.textPromptStyle} >
注册使用手机号码：{this.props.phoneNumber}
</Text >
<Text style = {styles.textPromptStyle} >
注册使用密码：{this.props.userPW}
</Text >
<Text style = {styles.bigTextPrompt}
onPress = {this.goBack.bind(this)}
>
返回
</Text>
</View>);
}

goBack(){
this.props.navigator.push(
{
name:"register"
}
);
}
}

let styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF'
},
textPromptStyle: {
fontSize: 20

},
bigTextPrompt: {
width: 300,
backgroundColor: 'gray',
color: 'white',
textAlign: 'center',
fontSize: 60
}
});

代码 链接: https://pan.baidu.com/s/1c2EHTD2 密码: hy7b