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

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

[email protected]

return (

    
      
    

    
      
        
        
      
      账号输入有误
      
        
        
      
      密码输入有误
    

    
      登录拨号
    

    
      
        账户注册
      
      
        找回密码
      
    

    
      版权所有
    

    
);



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就可以占据整行了。