react native的开发jsx语法里，样式是通过对象 赋值到 元素上的；
options = {
flexRow:{
display: flex
}
}
export const presets = StyleSheet.create(options);
例如上面的编写方式：
这就有需要把常用的css 规则，写成一个常用的 样式对象，这样在使用时就方便了很多。
这里的 flex 布局对象可以整理如下对象：
/********************************* flex布局 ***********************/
export default {
flexRow: {
display: "flex",
flexDirection: "row",
},
flexColumn: {
display: "flex",
flexDirection: "column",
},
justifyBetween: {
display: "flex",
justifyContent: "space-between",
},
justifyCenter: {
display: "flex",
justifyContent: "center",
},
justifyAround: {
display: "flex",
justifyContent: "space-around",
},
justifyStart: {
display: "flex",
justifyContent: "flex-start",
},
justifyEnd: {
display: "flex",
justifyContent: "flex-end",
},
justifyEvenly: {
display: "flex",
justifyContent: "space-evenly",
},
alignCenter: {
display: "flex",
alignItems: "center",
},
alignStart: {
display: "flex",
alignItems: "flex-start",
},
alignEnd: {
display: "flex",
alignItems: "flex-end",
},
flexWrap: {
flexWrap: "wrap",
},
flexNowrap: {
flexWrap: "nowrap",
},
/***************** flex 1、2、3 ... ***********************************/
flex_1: {
flex: 1,
},
flex_2: {
flex: 2,
},
flex_3: {
flex: 3,
},
flex_4: {
flex: 4,
},
flex_5: {
flex: 5,
},
flex_6: {
flex: 6,
},
/***************** gap ***********************************/
flexGap_5: {
gap: 5,
},
flexGap_10: {
gap: 10,
},
flexGap_15: {
gap: 15,
},
flexGap_20: {
gap: 20,
},
flexGap_25: {
gap: 25,
},
flexGap_30: {
gap: 30,
},
flexGap_35: {
gap: 35,
},
flexGap_40: {
gap: 40,
},
flexGap_45: {
gap: 45,
},
flexGap_50: {
gap: 50,
},
/***************** order 1、2、3 ... ***********************************/
order_0: {
order: 0,
},
order_1: {
order: 1,
},
order_2: {
order: 2,
},
order_3: {
order: 3,
},
order_4: {
order: 4,
},
order_5: {
order: 5,
},
order_6: {
order: 6,
},
order_7: {
order: 7,
},
order_8: {
order: 8,
},
order_9: {
order: 9,
},
order_10: {
order: 10,
},
};好了，这就是 flex布局对象，现在可以像写样式一样，写 react native 里面 view 或者text 的样式了。
感谢您的阅读，希望能帮助到您。
