React Native学习笔记(1)--九宫格实现

本篇是在学习《React Native入门与实战》这本书时做的笔记，代码基于React Native 0.44实现的，算是对该书中代码的小小更新。

View是一个容器组件，是UI组件中最基本的组件，类似于HTML中的div。
书中的九宫格是一个水平3栏，第二栏和第三栏又分上下两栏。效果如下图：

1.外层布局

不用想，我们首先创建一个根布局，并在里面添加水平3栏：

export default class demo01 extends Component {  render() {    return(        <View>            <View></View>            <View></View>            <View></View>        </View>    );  }}

2.flexbox水平三栏布局

我们使用flexbox实现水平布局并且平分屏幕宽度。这时候就需要借助于样式表了。

styles = StyleSheet.create({  container: {    flex:1,    height: 84,    borderRadius: 5,    flexDirection: 'row'  },  item: {    flex:1,    height: 80  }});

这里有两个样式比较重要，即：flex和flexDirection，flexbox默认的是纵向布局，即flexDirection默认为column。为了实现3个View水平布局，我们需要将为flexDirection的值设置为row，样式flex表示权重，即：当flexDirection值为row时，将平分宽度到每一个子View上。下面是为布局添加样式：

export default class demo01 extends Component {  render() {    return(        <View style={styles.container}>            <View style={styles.item}></View>            <View style={styles.item}></View>            <View style={styles.item}></View>        </View>    );  }}

3.上下两栏布局

有了上面的水平布局，纵向布局当然也难不倒你，在实现上下两栏布局时，我们需要引入新的组件－Text，用于显示文字。

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  PixelRatio} from 'react-native';

具体代码如下：

export default class demo01 extends Component {  render() {    return(      <View style={styles1.flex}>        <View style={styles1.container}>          <View style={[styles1.item, styles1.center]}>            <Text>酒店</Text>          </View>          <View style={[styles1.item, styles1.lineLeftRight]}>            <View style={[styles1.center, styles1.flex, styles1.lineCenter]}>              <Text>海外酒店</Text>            </View>            <View style={[styles1.center, styles1.flex]}>              <Text>特惠酒店</Text>            </View>          </View>          <View style={styles1.item}>            <View style={[styles1.center, styles1.flex, styles1.lineCenter]}>              <Text style={styles1.font}>团购</Text>            </View>            <View style={[styles1.center, styles1.flex]}>              <Text style={styles1.font}>客栈.公寓</Text>            </View>          </View>        </View>      </View>    );  }}styles1 = StyleSheet.create({  container: {    marginTop: 25,    marginLeft: 5,    marginRight: 5,    height: 84,    borderRadius: 5,    padding: 2,    flexDirection: 'row',    backgroundColor: '#FF0067'  },  item: {    flex:1,    height: 80,  },  center: {    justifyContent: 'center',    alignItems: 'center'  },  flex: {    flex:1  },  font: {    color: '#fff',    fontSize: 16,    fontWeight: 'bold'  },  lineLeftRight: {    borderLeftWidth: 1/PixelRatio.get(),    borderRightWidth: 1/PixelRatio.get(),    borderColor: '#fff'  },  lineCenter: {    borderBottomWidth: 1/PixelRatio.get(),    borderColor: '#fff'  }});