React Native入门(五)之使用输入框TextInput,按钮Button搭建
前言这篇文章来了解一下输入框组件TextInput和按钮Button的使用,并结合之前的Flexbox布局来搭建一个简单的登录界面! 废话不多说,先上效果图! 输入框组件TextInputTextInput是一个允许用户输入文本的基础组件。在Android中对应的就是EditText控件。 属性
下边两个属性呢,在Android环境下使用,为了统一,可以与iOS端一致!
还有需要注意的地方就是: 下边是属性值为
其他的属性,这里就不一一列举了,用到的时候可以查看官方文档。 按钮Button在RN v0.46版本,添加了 <Button onPress={onPressed} title="Login" color="green" accessibilityLabel="Learn more about this button" />
主要就是以上4个属性: 就长这样: 这里有一个问题很奇葩,就是它不能自己设置宽高,更确切的说这个按钮的高度是固定的,而宽度呢跟它的父容器的宽度一致!!!!宽高都不能自己设置,更别说我们设置它的样式了!WTF! 所以,更多的时候,是需要我们自己定制需要的按钮的!而不是用它这个 定制Button按钮我们可以使用三个组件来制作自己所需要的按钮!或者也可以在github.com网站上搜索
还有一个 <TouchableOpacity activeOpacity={0.5} style={LoginStyles.login} onPress={this.onButtonPress.bind(this)}> <Text style={{fontSize:15,color:'white',fontWeight:'bold'}}> 登录 </Text> </TouchableOpacity>
简单的使用呢,就是使用 至于其他两个组件的定制,就不再提了,可以查阅文档了解一下! 简单登录界面的搭建下面就输入框TextInput和定制的按钮,来搭建一个简单的登录界面。效果图呢,在文章开头已经有了,下面直接看代码: import React,{ Component } from 'react';
import {
AppRegistry,Image,StyleSheet,Text,TextInput,Alert,//简单的JS弹出框
TouchableOpacity,Dimensions,//获取屏幕宽高
View
} from 'react-native';
var width = Dimensions.get('window').width;//得到屏幕宽度
class LoginComponent extends Component {
//构造函数
constructor(props) {
super(props);
//两个状态用户输入框文本,密码框文本
this.state = {user_text: '',pass_text: ''};
}
//点击事件函数
onButtonPress () {
Alert.alert('用户输入信息','您输入的手机号/魅族账号为:'+this.state.user_text+',输入的密码为:'+this.state.pass_text);
};
render() {
return (
<View style={LoginStyles.container}>
<Image source={require('./img/flyme5_logo.png')}//项目中的图片
style={LoginStyles.logoImg}/>
<TextInput placeholder="手机号/魅族账号"
underlineColorAndroid={'transparent'}//去掉下划线
style={LoginStyles.username}
//将文本写入state
onChangeText={(user_text) => this.setState({user_text})}/>
<TextInput placeholder="密码"
secureTextEntry={true}//隐藏输入内容
underlineColorAndroid={'transparent'}
style={LoginStyles.username}
onChangeText={(pass_text) => this.setState({pass_text})}/>
<TouchableOpacity
activeOpacity={0.5}//点击时的透明度
style={LoginStyles.login}
//点击事件,要记得绑定
onPress={this.onButtonPress.bind(this)}>
<Text style={{fontSize:15,color:'white',fontWeight:'bold'}}>
登录
</Text>
</TouchableOpacity>
</View>
);
}
};
const LoginStyles = StyleSheet.create({
container:{
flex: 1,flexDirection: 'column',justifyContent: 'center'
},logoImg: {
width:100,height:108,alignSelf:'center',//设置子控件的位置居中
marginBottom:60
},username: {
width:width-32,//居中,宽度为屏幕宽度-32,这样左右都有16的边距
borderRadius: 20,//输入框边界圆角度数
borderColor: 'skyblue',//输入框边界颜色
marginBottom:16,paddingLeft:10,//这里是为了在圆角之后输入
padding:0,//去掉Android默认的padding
borderWidth: 1,alignSelf:'center'//自身居中
},login :{
width:width-32,height:35,borderRadius: 20,//按钮圆角
alignSelf:'center',backgroundColor:'skyblue',marginTop:20,justifyContent:'center',alignItems:'center'//显示Text组件居中
},});
AppRegistry.registerComponent('AwesomeProject',() => ButtonTest);
好了,具体的内容呢,上边代码中注释已经很清楚了! Alert.alert(
'Alert Title','My Alert Msg',[
{text: 'Ask me later',onPress: () => console.log('Ask me later pressed')},{text: 'Cancel',onPress: () => console.log('Cancel Pressed'),style: 'cancel'},{text: 'OK',onPress: () => console.log('OK Pressed')},],{ cancelable: false }
)
好了,我们再来看下,输入内容,点击按钮之后的效果: 结语本篇了解了输入框和按钮的定制,并搭建了一个简单的登录界面!涉及到的内容还是蛮多的!需要我们慢慢去理解消化! 好了,先这样了,我们下一篇再见! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |