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)
常用布局样式:
熟悉 类型
附:伸缩或者说流式布局里面,存在primary axis(主轴)和second axis(副轴)的概念,这两个轴是相互垂直的。flexDirection指定的是主轴的方向,又因为主抽和副轴相互垂直的,主抽确定下来了,副轴自然也就确定下来了。
常用的可见样式
熟悉 类型