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

上中下布局
类似新闻和门户APP的布局，上下贴边，中间为内容区。

样式表：

wrap {
 flex:1;
 flex-direction:column;
}

top{
 height: 40;
 background-color: #008E59;
}
centent{
 flex:1;
 background-color: #64BA9D;
}

bottom{
 height: 40;
 background-color: #a9ea00;
}

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

页面结构：

<View style={styles.wrap}>
  <View style={styles.top}>
   <Text style={styles.text}>
    头部信息
   </Text>
  </View>
  <View style={styles.centent}>
   <Text style={styles.text}>
    这是内容区{'n'}
   </Text>
  </View>
  <View style={styles.bottom}>
   <Text style={styles.text}>
    尾部信息
   </Text>
  </View>
</View>

综合布局
简单模拟网易新闻APP布局：

我们可以简单看看APP布局方式，总体来说就是上中下的布局方式，我们可以初步先编写外部结构
页面结构：

<View style={styles.wrap}>
  <View style={styles.top}>
   <Text>头部</Text>
  </View>
  <View style={styles.cententWrap}>
   <Text>新闻主题</Text>
  </View>
  <View style={styles.bottom}>
   <Text>
    尾部导航
   </Text>
  </View>
</View>
								 
 5/8   首页 上一页 3 4 5 6 7 8 下一页 尾页