很多時候我們需要各種各樣的頁面布局姑荷。
React Native Elements 中提供了一個布局神器妓局，就是 Grid, Row, Col冬阳。這里是它的文檔：https://react-native-training.github.io/react-native-elements/API/grid/
Quick Layout with Easy Grid
當(dāng)然丑掺，很多布局你可以直接通過 Flex 實現(xiàn)猪钮。這里先也給出 Flex 的一些基本用法參考：
Solved by Flexbox
Flex 布局教程：語法篇
Flex 布局教程：實例篇
我們看看 LoginView品山，最下方是用戶協(xié)議和登錄注冊，使用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>登錄表明您同意《用戶協(xié)議》</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'
}
});
當(dāng)然烤低，我們可以直接使用 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扑馁，當(dāng)然更為強大涯呻，React Native Elements 的 Gird 就是借鑒于此。
https://docs.nativebase.io/Components.html#Layout
