初步体验React-Native（一）

·关于Rn的拓展介绍可以参考官网，这里就直接进入主题，先看看常用的几个Rn组件，下列是一段简单的demo

以一个简单的注册界面来切入话题：

所用到的是React-Native自带的几个常规组件:
import { TextInput, TouchableOpacity, View, StyleSheet, Text, Image, Modal} from "react-native";
TextInput对标 常规的输入框（input），View对标 div，并且默认都是flex布局

 源码解析： 使用类的形式来写组件

import React from “react”;
import {TextInput, TouchableOpacity, View, StyleSheet, Text, Image, Modal} from “react-native”;

export default class Form extends React.Component{
constructor(props) {
super(props);
this.state = {
userName:"",
userPsw:"",
modalVisable:false,
tip:""
}
}
//注册事件
regiterWay(){
if (!this.state.userName) return this.setState({modalVisable:true,tip:“记得填写账号!”})
else if(!this.state.userPsw) return this.setState({modalVisable:true,tip:“记得填写密码!”})
}
//输入校验
inputChange(state,val){
switch (state) {
case “userName”:
this.setState({userName:val})
break;
case “userPsw”:
this.setState({userPsw:val})
break;
default:
break;
}
}
//弹窗组件
renderModal(tip){
return(
<Modal animationType=“fade”
transparent={true}
visible={this.state.modalVisable}
onrequestclose={() => {alert(“Modal has been closed.”)}}
supportedOrientations={[‘portrait’, ‘portrait-upside-down’, ‘landscape’, ‘landscape-left’, ‘landscape-right’]}
>
<View style={ {
width:“50%”,
height:100 ,
backgroundColor: ‘#fff’,
opacity:0.6,
justifyContent: ‘center’,
alignItems: ‘center’,
borderRadius: 5,
position:“absolute”,
left:“25%”,
top:“50%”}}
>

<TouchableOpacity
onPress={()=>{this.setState({modalVisable:false})}}
>
{tip}




)
}

render() {
    return(
        <View style={styles.container}>
            {this.renderModal(this.state.tip)}
            <Image style={styles.img_sty} source={
   
   {uri:'http://downza.img.zz314.com/edu/pc/txyy-1010/2017-09-26/f0e5ff17e7611d50b9ffe3a19d2634ad.jpg'}}/>
            <TextInput style={styles.input_sty}
                       placeholder="输入用户账号"
                       maxLength={11}
                       onChangeText={(text)=>this.inputChange("userName",text)}
                       keyboardType={"number-pad"}
                       returnKeyType={"done"}
            >
            </TextInput>
            <TextInput style={styles.input_sty}
                       placeholder="输入用户密码"
                       onChangeText={(text)=>this.inputChange("userPsw",text)}
                       keyboardType={"default"}
                       returnKeyType={"done"}
                       secureTextEntry={true}
            >
            </TextInput>
            <TouchableOpacity
                style={styles.button_sty}
                onPress={()=>this.regiterWay()}
            >
                <Text style={
   
   {textAlign:"center",lineHeight:50,color:"#fff"}}>注册</Text>
            </TouchableOpacity>
        </View>
    )
}

}

const styles = StyleSheet.create({
container:{
backgroundColor: “#fff”,
flex:1,
flexDirection: “column”,
justifyContent:“center”,
alignItems:“center”,
padding:5
},
button_sty:{
height:50,
backgroundColor:"#393D49",
borderRadius:5,
width:“90%”
},
input_sty:{
width: “90%”,
fontSize:13,
letterSpacing:1
},
img_sty:{
width: 100,
height: 100,
marginBottom:30
}
})

大致的写法和React差不多，主要坑的就是在写样式的时候不会和Css那样，有很多特效写法不能用Css的属性实现

·目前自己在继续研究，尝试用Rn来跨平台开发App，第一篇文章就简单意思下，后续再总结更多实用的干货。最后提一下：在学新东西的时候，多看官方文档