1、样式的定义可以使用两种方式：
第一种：
export default class App extends Component {
render() {
return (
<View style={{backgroundColor: '#ff0000'}}>
<MyCustomComponent
name={'zhangsan'}
age={18}
/>
</View>
)
}
}
第二种：
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<MyCustomComponent
name={'zhangsan'}
age={18}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
backgroundColor: "#ff0000"
}
});
2、flexbox布局：
1)flexDirection:在组件的style中指定flexDirection可以决定布局的主轴，设置为row，则水平轴为主轴，设置为column，则垂直轴为主轴；
在根部局View中，默认的排列方式是按列排列(column)，可以使用flexDirection来改变布局的排列方式，下面的样式是按行排列
style={{flexDirection:'row'}}
2)justifyContent：在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between；
当flexDirection为row时，设置justifyContent为center则可实现水平居中排列；
当flexDirection为column时，设置justifyContent为center，如果想实现在屏幕垂直方向居中对齐，这时需要配合flex=1来使用，flex=1可以使View在column方向撑满所有的剩余空间；
//垂直方向居中
export default class App extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: "column", justifyContent: 'center'}}>
<MyCustomComponent
name={'zhangsan'}
age={18}
/>
</View>
)
}
}
//水平居中
export default class App extends Component {
render() {
return (
<View style={{flexDirection: "row", justifyContent: 'center'}}>
<MyCustomComponent
name={'zhangsan'}
age={18}
/>
</View>
)
}
}
- alignItems:在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
实现水平垂直居中：
export default class App extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: "column", justifyContent: 'center', alignItems: 'center'}}>
<MyCustomComponent
name={'zhangsan'}
age={18}
/>
</View>
)
}
}
