ReactNative 样式布局小结

本文主要是介绍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,
}