React Native核心组件View的介绍
View是React Native的基础构建元素，是该平台的抽象层，类似于IOS里面的UIView、Android里面的android.View、web里面的div。
View是用来修饰和布局它的子元素的。下面举例说明：
import React, { Component } from 'react'
import { AppRegistry, View, StyleSheet } from 'react-native'
class App extends Component {
render() {
return (
<View style={styles.container}> //外层View
<View style={styles.box} /> //内层View
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
box: {
width: 200,
height: 200,
backgroundColor: 'skyblue',
borderWidth: 2,
borderColor: 'steelblue',
borderRadius: 20,
}
}
)
AppRegistry.registerComponent('App', () => App)
常用布局样式：
熟悉 类型
flex number 伸缩、流式布局，该元素填充的比例；类似于android布局的weight属性。0表示不填充
flexDirection string 布局方向，可选值column、row，column表示垂直方向布局，row表示水平方向布局；类似于android布局的orientation
justifyContent string 主轴上的排列方式，可选值flex-start, center, flex-end, space-around, space-between
alignItems string 副轴上的排列方式，可选值flex-start, center, flex-end, stretch
width number 宽度
height number 高度
margin number 外边距
padding number 内边距
附：伸缩或者说流式布局里面，存在primary axis(主轴)和second axis(副轴)的概念，这两个轴是相互垂直的。flexDirection指定的是主轴的方向，又因为主抽和副轴相互垂直的，主抽确定下来了，副轴自然也就确定下来了。
常用的可见样式
熟悉 类型
backgroundColor string 背景颜色
borderWidth number 边框大小
borderColor string 边框颜色
borderRadius number 圆角大小
opacity number 透明度
以上是 React Native核心组件View的介绍 的全部内容， 来源链接： utcz.com/z/382704.html
