很多时候我们需要各种各样的页面布局。
React Native Elements 中提供了一个布局神器，就是 Grid, Row, Col。这里是它的文档：https://react-native-training.github.io/react-native-elements/API/grid/
Quick Layout with Easy Grid
当然，很多布局你可以直接通过 Flex 实现。这里先也给出 Flex 的一些基本用法参考：
Solved by Flexbox
Flex 布局教程：语法篇
Flex 布局教程：实例篇
我们看看 LoginView，最下方是用户协议和登录注册，使用Flex的代码如下：
<View style={styles.container}>
<View style={styles.main}>
<Tile
imageSrc={require('../images/card.jpg')}
title="敷点面膜"
featured
caption="您的移动面膜助理"
/>
<Button
buttonStyle={{marginTop: 25}}
backgroundColor='#62b900'
icon={{ name: 'wechat', type: 'material-community' }}
onPress={() => log()}
title="微信登录"
/>
</View>
<View style={styles.footer}>
<Text>登录表明您同意《用户协议》</Text>
<Text>帐号登录 | 注册</Text>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
},
main: {
flex: 0.8,
},
footer: {
flexDirection: 'row',
paddingBottom: 10,
padding: 16,
justifyContent: 'space-between'
}
});
当然，我们可以直接使用 React Native Elements 提供的 Grid, Row, Col
<Grid>
<Row size={8}>
<ScrollView >
...
</ScrollView>
</Row>
<Row size={2}>
<View>
...
</View>
</Row>
</Grid>
不需要写单独的styles代码，就可以直接快速布局 layout 。
NativeBase 也提供了整套 Layout Component，当然更为强大，React Native Elements 的 Gird 就是借鉴于此。
https://docs.nativebase.io/Components.html#Layout
