React Native学习之View组件

在React Native里有一个类似于div的组件，那就是View组件，支持多层嵌套，支持flexbox布局

实例步骤：

加载View组件

创建组件

添加样式表

注册入口

外层布局

<View style={styles.container}>

    <View style={styles.item}></View>
    <View style={styles.item}></View>
    <View style={styles.item}></View>

</View>

Flexbox水平三栏布局

外联样式：

style={styles.container}

内联样式：

style={{flex:1, borderWidth:1, borderColor:'red', flexDirection:'row'}}

多个样式：

style={[styles.container, styles.flex, {borderWidth:1,borderColor:'red'}]}

上下两栏布局

<View style={[styles.center, styles.flex]}>
    <Text>团购</Text>
</View>

<View style={[styles.center, styles.flex]}>
    <Text>客栈，公寓</Text>
</View>

完善效果

<View style={[styles.item, styles.lineLeftRight]}>
    <View style={[styles.center, styles.flex, styles.lineCenter]}>
        <Text style={styles.font}>海外酒店</Text>
    </View>

    <View style={[styles.center, styles.flex]}>
        <Text style={styles.font}>特惠酒店</Text>
    </View>
</View>

粗糙效果代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class RNAPP extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.item, styles.center]}>
          <Text>酒店</Text>
        </View>

        <View style={styles.item}>
          <View style={[styles.center, styles.flex]}>
            <Text>海外酒店</Text>
          </View>
          <View style={[styles.center, styles.flex]}>
            <Text>特惠酒店</Text>
          </View>
        </View>

        <View style={styles.item}>
          <View style={[styles.center, styles.flex]}>
            <Text>团购</Text>
          </View>
          <View style={[styles.center, styles.flex]}>
            <Text>客栈，公寓</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    borderWidth:1,
    borderColor:'red',
    flexDirection:'row',
  },
  item: {
    flex: 1,
    height:80,
    borderColor:'blue',
    borderWidth:1,
  },
  center:{
    justifyContent:'center',
    alignItems:'center',
  },
  flex:{
    flex:1,
  },
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);

优化后的效果代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  PixelRatio,
  Text,
  View
} from 'react-native';

class RNAPP extends Component {
  render() {
    return (
      <View style={styles.flex}>
        <View style={styles.container}>
          <View style={[styles.item, styles.center]}>
            <Text style={styles.font}>酒店</Text>
          </View>

          <View style={[styles.item, styles.lineLeftRight]}>
            <View style={[styles.center, styles.flex, styles.lineCenter]}>
              <Text style={styles.font}>海外酒店</Text>
            </View>
            <View style={[styles.center, styles.flex]}>
              <Text style={styles.font}>特惠酒店</Text>
            </View>
          </View>

          <View style={styles.item}>
            <View style={[styles.center, styles.flex, styles.lineCenter]}>
              <Text style={styles.font}>团购</Text>
            </View>
            <View style={[styles.center,styles.flex]}>
              <Text style={styles.font}>客栈，公寓</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop:200,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:'row',
    borderRadius:5,
    padding:2,
    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',
  },
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);