1） 引入样式
import { StyleSheet } from 'react-native'
2） 创建样式
const styles = StyleSheet.create({
container: {
backgroundColor: "#eae7ff",
flex: 1
}
});
3） 调用样式的几种方式
单个样式引用（对象）
<View style={styles.container}></View>
多个样式引用（数组）
<View style={[styles.container,styles.addStyle]}></View>
条件样式
<View style={[styles.container,true && styles.addStyle]}></View>
<View style={true ? styles. container : {} }></View>
//单条建议用三元，如为false时返回null 有可能加载错误
直接使用样式（不推荐，不利于维护）
<View style={{fontSize:40, width:80,}}> </View>
<View style={[styles.container,{marginTop: 80}]} />
4） Flex布局与cssFlex的区别
| 参数名 | 值 | 与css的区别（无以下属性） |
|---|---|---|
| Flex | number | |
| flexDirection | row：主轴水平，起点在左 column（默认值）：主轴垂直，起点在上，默认值 | row-reverse 主轴水平，起点在右 column-reverse 主轴垂直，起点在下 默认值：row |
| flexWrap | wrap：换行，第一行在上方 noWrap（默认值）：不换行 | wrap-reverse 换行，第一行在下方 |
| justifyContent | flex-start（默认值）：左对齐 flex-end：右对齐 center：居中 space-between：两端对齐，项目之间间隔相等 space-around：每个项目的间隔相等。项目间的与项目与边框的间隔大一倍 | |
| alignItems | flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 | baseline: 项目的第一行文字的基线对齐。 |
| alignSelf | flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 stretch（默认值）：如果项 S目未设置高度或设为auto，将占满整个容器的高度。 | baseline: 项目的第一行文字的基线对齐。 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 |
| flexFlow | flex-direction flex-wrap FlexDirection和flexWrap的简写形式 |
相对于flexDirection ： justifyContent 主轴 alignItems交叉轴
| flexDirection | 主轴(justifyContent) | 交叉轴(alignItems) |
|---|---|---|
| row | 水平 | 垂直 |
| clumn | 垂直 | 水平 |
5） reactNative styleSheet与CSS样式的区别
1）区别点
大多数和css参数一致，采用javascript里的驼峰命名写法，部分参数名称不一样。
2）参数区别
| Css | React-native | 参数 |
|---|---|---|
| backgroundSize | resizeMode | contain cover stretch |
| text-decoration | textDecorationLine | none：无线 underline：下划线 line-through：删除线 |
3）新增的属性
| 属性 | Type | 说明 |
|---|---|---|
| marginHorizontal | number | 左右外边距 |
| marginVertical | number | 上下外边距 |
| paddingHorizontal | number | 左右内边距 |
| paddingVertical | number | 上下内边距 |
4）文本对象的属性
| numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间 | 文本行数限制，添加后超过限制行数文本会在末尾默认以...的形式省略。 用法： <Text numberOfLines={6}/> |
|---|---|
| ellipsizeMode | 设置文本缩略格式，配合numberOfLines使用，values： tail：在末尾...省略（默认值） clip：在末尾切割，直接切割字符无省略符 head：在前面...省略 middle：在中间...省略 |
本文部分内容来自网络收集。
