B08.View组件.txt

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

实例步骤：

1.加载View组件

2.创建组件

3.添加样式表

4.注册入口

5.外层布局

  <View style={styles.container}>

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

     </View>


6.flexbox水平三栏布局

  外联样式：style={styles.container}

  内联样式：style={{flex:1,borderWidth:1,borderColor:'red',flexDirection:'row'}}

  多个样式：style=
  {[styles.container,styles.flex,{borderWidth:1,borderColor:'red'}]}

  

7.上下两栏布局

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

8.完善效果
    <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>

9.最终代码：
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.flex}>
      <View style={styles.container}>

        <View style={[styles.item,styles.center]}>
          <Text>酒店</Text>
        </View>

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

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

const styles = StyleSheet.create({
  container: {
    marginTop:220,
    marginLeft:5,
    marginRight:5,
    height:100,
    flexDirection:'row',
    borderRadius:5,
    padding:2,
    backgroundColor:'#FF0067',
  },

  item:{
    flex:1,
    height:95,
  },

  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'
  }
});

10.知识点：

borderLeftWidth:1/PixelRatio.get(),//获得设备最小的线宽,需要引入PixelRatio

center:{
    justifyContent:'center',
    alignItems:'center',
  },//居中效果