React-Native之（小白计划四）Flexbox简单布局

创建样式

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",