Flexbox布局
flex 弹性布局 number
用于设置弹性盒模型分配空间，比如: flex:1
flexDirection 主轴的方向 enum('row','row-reverse','column','column-reverse')
- row:水平，起点在左
- row-reverse :水平，起点在右
- column:垂直，起点在上（默认，CSS默认为row）
- column-reverse:垂直，起点在下
justifyContent 主轴对齐方式 enum('flex-start','flex-end','center','space-between','space-around')
- flex-start:左对齐（默认）
- flex-end :右对齐
- center:居中
- space-between:两端对齐
- space-around：子元素两侧间隔相等
**alignItems ** 交叉轴对齐方式 enum('flex-start','flex-end','center','stretch')
- flex-start:交叉轴起点对齐
- flex-end :交叉轴终点对齐
- center:交叉轴中点居中
- stretch:占满容器高度，（默认）
结合使用实现垂直居中：
{flexDirection:'row',justifyContent:'center',alignItems :'center'}
flexWrap 轴线 enum('wrap', 'nowrap')
- wrap:换行展示
- nowrap :不换行
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值
图片相关
加载本地图片
<Image source={require('./my-icon.png')} />
加载网络图片
<Image source={{uri: '图片地址'}} />
背景图片使用 <ImageBackground/>
tip:图片必须要设置宽高，要使图片自适应宽度高度显示，使用：react-native-fit-image
resizeMode enum('cover','contain','stretch')
- cover:裁剪
- contain:拉伸
- stretch:原图展示
overflow enum('visible', 'hidden') 超出部分是否显示，hidden为隐藏
tintColor 着色，rgb字符串类型
opacity 透明度
设置圆角：imageStyle={{borderRadius:20}} //隐藏属性
边框
宽度
- borderBottomWidth
- borderTopWidth
- borderRightWidth
- borderLeftWidth
- borderWidth
颜色
- borderBottomColor
- borderTopColor
- borderRightColor
- borderLeftColor
- borderColor
外边距
- marginBottom
- marginTop
- marginRight
- marginLeft
- margin
内边距
- paddingBottom
- paddingTop
- paddingRight
- paddingLeft
- padding
圆角
- borderTopLeftRadius
- borderTopRightRadius
- borderBottomLeftRadius
- borderBottomRightRadius
- borderRadius
样式
borderStyle：边框样式'solid'实线，'dotted'点， 'dashed'虚线
阴影（只对ios生效，可使用插件：react-native-shadow）
- shadowColor
- shadowOffset
- shadowOpacity
- shadowRadius
定位
position enum('absolute','relative')
left/top/right/bottom 偏移距离
获取当前屏幕宽/高
import { Dimensions } from 'react-native';
const { height, width } = Dimensions.get('window');
颜色渐变
yarn add react-native-linear-gradient
react-native link react-native-linear-gradient
import LinearGradient from 'react-native-linear-gradient';
//示例
<LinearGradient colors={[‘#fff’, '#000']} start={{x: 0, y: 0}} end={{x: 1, y: 0}} style={{height:150}}></LinearGradient >
默认情况下，渐变色的方向是从上向下的，假如你想渐变色从左向右，或者斜角渐变，就需要设置下了start ,end 参数
start:{ x: number, y: number }
end:{ x: number, y: number }
其他设置，请详细看插件教程
网友评论