ReactNative 样式布局小结

在ReactNative中的一些样式布局问题总结

创建样式

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#eae7ff",
        flex: 1
    }
});

应用样式

render() {
        return (
            <View style={styles.container}></View>
        );
    }

样式详解

• 如果给最外面的view设置样式：

  container: {
      backgroundColor: "#eae7ff",
      flex: 1,
      marginTop: 20;
  }
  

  其中flex:1会撑满全部手机界面，marginTop:20会留出上面状态栏的位置

• 常用样式

  container: {
      backgroundColor: "#eae7ff", /*设置背景色*/
      borderColor:"red", /* 设置边框颜色 */
      borderWidth:1, /* 设置边框宽度 */  
      borderRadius:10, /* 设置边框圆角 */
      shadowColor: "#ccc", /* 阴影颜色 */
      shadowOpacity: 0.5 /* 设置阴影透明度 */
      shadowRadius: 2, /* 设置阴影扩散程度 */
      shadowOffset:{
          height:1, /* 设置阴影偏倚：垂直方向偏移量 */
          width:1  /* 设置阴影偏倚：水平方向偏移量 */
      }
  },

• 文字样式

  title: {
      fontSize: 26, /* 文字大小 */
      color: "red", /* 文字颜色 */
      textAlign: "center", /* 文字对齐方式：auto,left,right,center,justify */
      fontSyle: "italic", /* 文字样式 */
      letterSpacing: 2, /* 文字间距 */
      lineHeight: 20, /* 文字行高 */
      fontFamily: "Helvetica Neue", /* 文字字体 */
      fontWeight: "300", /* 文字粗细 : 300 - 900, bold */
      textDecorationLine: "underline", /* 文字修饰：下划线underline，删除线line-through */
      textDecorationStyle: "dashed", /* 文字修饰的线条样式：solid, double, dotted, dashed  */
      textDecorationColor: "red" /* 文字修饰线条的颜色 */
  }
  

flexbox 布局

通用view层代码：

<View style={styles.container}>
     <View style={[styles.item, styles.itemOne]}>
         <Text style={styles.itemText}>1</Text>
     </View>
     <View style={[styles.item, styles.itemTwo]}>
         <Text style={styles.itemText}>2</Text>
     </View>
     <View style={[styles.item, styles.itemThree]}>
         <Text style={styles.itemText}>3</Text>
     </View>
</View>

一般布局 [justifyContent: “flex-start”]

• 样式代码：

  container: {
      justifyContent: "flex-start", /* 默认布局样式 */
      backgroundColor: "#eae7ff",
      flex: 1,
      paddingTop: 23
  },
  item: {
      backgroundColor: '#fff',
      borderWidth: 1,
      borderColor: '#6435c9',
      margin: 6,
  },
  itemOne: {},
  itemTwo: {},
  itemThree: {},
  itemText: {
      fontSize: 33,
      fontFamily: "Arial",
      fontWeight: '200',
      color: "#6435c9",
      padding: 30,
  }
  

• 渲染结果