Windows下React Native的Android环境部署及布局示例

2019-12-10 18:46:26王冬梅

systemProp.https.proxyHost=You https proxy
systemProp.https.proxyPort=You https proxyPort
systemProp.http.proxyHost=You proxy
systemProp.http.proxyPort=You proxyPort

总算是把android应用程序跑起来了,真累人啊

Windows,React Native,Android环境部署

 

布局
这里以三种经典布局来讲解react-native布局概念,主要以flexbox为主,react native中有两个基本元素< View >与< Text >,分别类似于web端div和span,用于布局和修饰。需要注意的是,react native不是所有的CSS属性都支持,这里有react native所支持的CSS属性。

准备工作
在JSX中写样式还是有点不习惯,这里使用react-native-css模块来编写样式,安装、使用过程如下:

npm install react-native-css -g 
react-native-css -i style.css -o style.js --watch

布局讲解
左右布局
由于是横向布局,我们需要flex-direction: row(默认纵向布局),左右以1:1方式排版,就都需要flex:1,布局容器也需要加上flex:1,表示为伸缩容器。由于react native没有br标签,需要换行只能将换行符插入。

样式表:

wrap {
 flex:1;
 flex-direction: row;
 background-color: yellow;
}

left{
 flex:1;
 background-color: #64BA9D;
}

right{
 flex:1;
 background-color: #008E59;
}

text{
 padding:10;
 font-size:16;
 color:#EEEEEE;
 line-height:20;
 text-align: center;
}