React Native 学习之组件View

681 查看

最近换了工作，本人是原生Android原生开发。新公司是用RN开发，以前没有接触过，这段时间一直在看这方面的内容。网上有很多教程了，但为了能够在新项目开始之前快速熟悉RN , 直接从小案例开始，顺便通过博客来记录自己的学习过程。

实现效果如下图：

RNView.png

布局非常简单：水平3栏，第二栏和第三栏通过分割线又分为上下2栏。

接下来我们一步步快速的实现

首先创建一个RN项目，开始编辑index.android.js文件

render() {
    return (
      //根View ，有且只能有一个根View
      <View >
              //第一栏
            <View>
              <Text>洒店</Text>
            </View>
            //第二栏
            <View>
              <View>
                <Text>海外洒店</Text>
              </View>
              <View>
                <Text>特惠洒店</Text>
              </View>
            </View>
            //第三栏
            <View>
              <View>
                <Text>团购</Text>
              </View>
              <View>
                <Text>客栈.公寓</Text>
              </View>
            </View>
          </View>
    );
  }

运行效果图:

effect1.png

上面的View是一个容器组件，提供了视图布局的功能。他相当于Html中的<div>标签，相当于Android当中的ViewGroup，可以放一些子元素。接下来就是设置一些样式了

根View的一些样式

  const styles = StyleSheet.create({
      container: {
          // 整个View离左边的间距
          marginLeft: 5,
          marginRight: 5,
          marginTop: 25,
          // 整个View的高度
          height: 90,
          //子元素在父容器中排列方向：水平方向(从左向右)；coloum为垂直方向（从上到下）
          flexDirection: 'row',
          // 整个View的边框四个角的弧度
          borderRadius: 8,
          backgroundColor: '#ff0060',
      },                
  });

  //样式使用
  <View style={styles.container}>
  <View>
    <Text>洒店</Text>
  </View>
  ...

effect2.png

上面的flexDirection，除了上面说的，还有两个属性：row-reverse（从右向左）, coloum-reverse(从下到上)，后面会演示期效果。在styles中继续添加样式

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

<View style={styles.item}>
      <Text>洒店</Text>
    ...
 <View style={styles.item}>
      <View>
        <Text>海外洒店</Text>
             ...

 <View style={styles.item}>
      <View>
        <Text>团购</Text>
            ...

effect3.png

flex可以理解为权重，也就是一个子View在父View占的比例大小。如上面的水平三栏，也就是每一栏都占1/3。相当于Android当中的weight

center: {
  justifyContent: 'center', //重直居中
  alignItems: 'center'         //水平居中
},
flex: {
  flex: 1
},

font: {
  color: '#fff',
  fontSize: 20,
  fontWeight: 'bold'
},


<View style={styles.container}>

                <View style={[styles.item, styles.center]}>
                    <Text style={styles.font}>酒店</Text>
                </View>
                <View style={[styles.item]}>
                    <View style={[styles.center, styles.flex]}>
                        <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]}>
                        <Text style={styles.font}>团购</Text>
                    </View>

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

            </View>

effect4.png

最后添加分割线。注意需要在import中添加PixelRatio

dividerLeftRight: {
    //PixelRatio的get方法用于获取高清设备的像素比。使用1/PixelRatio.get()就可以获得最小线宽
    borderLeftWidth: 1 / PixelRatio.get(),
    borderRightWidth: 1 / PixelRatio.get(),
    borderColor: '#fff'
},

dividerCenter: {
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: '#fff'
}




<View style={styles.container}>

            <View style={[styles.item, styles.center]}>
                <Text style={styles.font}>酒店</Text>
            </View>
            <View style={[styles.item, styles.dividerLeftRight]}>
                <View style={[styles.center, styles.flex, styles.dividerCenter]}>
                    <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.dividerCenter]}>
                    <Text style={styles.font}>团购</Text>
                </View>

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

        </View>

effect5.png

最后来一个水平反向的。将container中的flexDirection: 'row-reverse',就可以了

effect6.png