React Native 速成 008 — 布局神器 Grid

很多时候我们需要各种各样的页面布局。

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