从零学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;