React-Native之CSS布局

• 说实话，对于没有前端基础的我来说，这还是有点费劲的。但是对我来说，正好也可以补习一点前端语言知识。
• 在日常开发中，布局可以说是必须课。一款成功的移动应用的必要条件就是用户体验不一般，而用户体验最主要的部分就是性能和UI。所以除了性能上的良好体验以外，最重要的就是界面布局。我们可以把性能比作是有趣的灵魂，而界面布局就是好看的皮囊。
• GitHub地址：https://github.com/AnswerXu/React-Native.git

1. 视图边框

• 视图边框，这是最常用的布局属性了。在iOS开发中，就是设置视图的layer层的borderWidth、borderColor这两个属性，就可以在视图周围加上边框效果。但是似乎在RN中，这个属性变得更灵活了。

  borderWidth: 5,                 // 设置上、左、下、右的边框宽度
  borderTopWidth: 5,              //  上边框宽度
  borderLeftWidth: 10,            //  左边框宽度
  borderBottomWidth: 5,           // 下边框宽度
  borderRightWidth: 10,           // 右边框宽度
  
  borderColor: '#ff0000',         // 设置上、左、下、右边框颜色
  borderTopColor: '#ffde00',      // 上边框颜色
  borderLeftColor: '#00ffa3',     // 左边框颜色
  borderBottomColor: '#ff8200',   // 下边框颜色
  borderRightColor: '#ff008a',    // 右边框颜色
  

2. 尺寸

• 宽度和高度

  width: 100,       // 宽度
  height: 100,      // 高度
  

• 弹性(Flex)：在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用
  flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件件flex值的比)

3. 外边距

• 用途：用于设置组件与组件之间的间距。
• 场景：想要设置自己在父组件的位置时使用。
• 注意：
  • 第一个组件参照父组件，与父组件间的间距；其他组件间距是相对于上一个组件。
  • marginRight和width会冲突，如果设置了width,则marginRight无效

  margin: 10,                 // 外边距
  marginTop: 10,              // 上外边距
  marginLeft: 10,             // 左外边距
  marginBottom: 10,           // 下外边距
  marginRight: 10,            // 右外边距
  

4. 内边距

• 用途：用于设置子组件与自己之间的间距。
• 场景：想要设置子组件与自己的间距时使用。
• 注意：
  • 第一个组件参照父组件，与父组件间的间距；其他组件间距是相对于上一个组件。
  • marginRight和width会冲突，如果设置了width,则marginRight无效

  padding: 20,          // 设置上、左、下、右的内边距
  paddingTop: 20,       // 设置上内边距
  paddingLeft: 20,      // 设置左内边距
  paddingBottom: 20,    // 设置下内边距
  paddingRight: 20,     // 设置右内边距
  

5. 相对定位和绝对定位

• 相对定位

   position: ' relative',   // 相对定位，参照自己位置定位
   top：5,                  // 上边缘
   left: 5,                 // 左边缘
   bottom：5,               // 下边缘
   right：5,                // 右边缘
  

• 绝对对定位

   position: 'absolute',    // 绝对定位，参照父组件位置定位
   top：5,                  // 上边缘
   left: 5,                 // 左边缘
   bottom：5,               // 下边缘
   right：5,                // 右边缘
  

组件渲染

export default class Layout_CSS extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.borderViewStyle}>
          <Text style={styles.borderChildViewSytle}>
            child0
          </Text>
        </View>
        <View style={styles.borderViewStyle}>
          <Text style={styles.borderChildViewSytle}>
            child1
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  borderViewStyle: {
    backgroundColor: '#00abff',
    // size
    width: 300,
    height: 200,

    // 外边距
    marginTop: 60,
    marginLeft: 30,

    // 内边距
    paddingTop: 20,
    paddingLeft: 50,

    // 边框宽度
    // borderWidth: 5,
    borderTopWidth: 5,
    borderLeftWidth: 10,
    borderBottomWidth: 5,
    borderRightWidth: 10,

    // 边框颜色
    // borderColor: '#ff0000',
    borderTopColor: '#ffde00',
    borderLeftColor: '#00ffa3',
    borderBottomColor: '#ff8200',
    borderRightColor: '#ff008a',
  },
  borderChildViewSytle: {
    backgroundColor: 'red',
    width: 50,
    height: 50,
    fontSize: 15,
    color: 'white',
    textAlign: 'center',
    alignItems: 'center',
  },
});

• 效果图

  
  5A02BC36-F067-47EE-A6CA-C7B691A194CB.png

DCEE4D82-B7A8-4628-9145-B3DCF0B2E797.png