菜鸡装B失败锦集-ReactNative 布局

由于本菜鸡写过好长时间DIV+CSS 所以，这个玩意在Sunny妹子的指导下，装B成功！！！

QQ20160530-0@2x.png

return (
<View style = {styles.container}>

    <View style = {styles.logo}>
      <Image source={require('./resources/images/LOGO.gif')} />
    </View>

    <View style={styles.inputnp}>
      <View style = {styles.ipt}>
        <Image source={require('./resources/images/1.gif')} style={styles.loginpic}/>
        <TextInput style={styles.input} keyboardType="email-address" placeholder="请输入账号" placeholderTextColor="#1e87c6" autoCorrect={false} />
      </View>
      <Text style={styles.check}>账号输入有误</Text>
      <View style = {styles.ipt}>
        <Image source={require('./resources/images/2.gif')} style={styles.loginpic}/>
        <TextInput style={styles.input} secureTextEntry={true} placeholder="请输入密码" placeholderTextColor="#1e87c6"/>
      </View>
      <Text style={styles.check}>密码输入有误</Text>
    </View>

    <TouchableOpacity style={styles.loginbtn}>
      <Text style={styles.loginbtntext}>登录拨号</Text>
    </TouchableOpacity>

    <View style={styles.loginabout}>
      <TouchableOpacity style={styles.loginabouttch}>
        <Text style={styles.loginabouttext}>账户注册</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.loginabouttch}>
        <Text style={styles.loginabouttext}>找回密码</Text>
      </TouchableOpacity>
    </View>

    <View style={styles.copy} >
      <Text style={styles.copytext}>版权所有</Text>
    </View>

  </View>  
);



const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#105c89',
},
logo: { 
marginTop: 120,
},
inputnp: {
marginTop: 90,
},
ipt: {
flexDirection: "row",
alignItems:'center',
borderBottomColor: '#75a7c8',
borderBottomWidth: 1,
},
input: {
height: 30,
marginTop: 10,
width: 280,
fontSize: 12,
paddingLeft: 5,
marginTop: 5,
color: "#FFF",
},
loginpic: {
width: 15,
height: 15,
},
check: {
fontSize:12,
color: "#db547a",
marginTop: 5, 
textAlign: "right",
},
loginbtn: {
width: 260,
height: 40,
backgroundColor: '#2674a2',
justifyContent:'center',
alignItems:'center',
marginTop: 150,
},
loginbtntext: {
color: "#FFF",
},
loginabout: {
flexDirection: "row",
},
loginabouttch: {
marginTop: 15,
margin: 5,
},
loginabouttext: {
color: "#7391ae",
fontSize: 12,
},
copy: {
height:30,
backgroundColor: "#1e6792",
flexDirection: 'row',
position: "absolute",
bottom: 0,
alignItems: "center",
justifyContent: "center",
left: 0,
right: 0
},
copytext: {
color: "#FFF",
fontSize: 12,
},
});

这里要注意几个问题！！！

1：TextInput，这个东西不能直接给他设置底borderBottomWidth，需要傻呵呵的在外面包一个View然后在View上设置才会生效。

2：用到绝对定位以后（position: "absolute"），flexDirection: 'row'这样水平排列不能占据整行，left、right都设置成0就可以占据整行了。