美文网首页ES6RN
React Native 速成 008 — 布局神器 Grid

React Native 速成 008 — 布局神器 Grid

作者: 时见疏星 | 来源:发表于2017-05-29 17:22 被阅读1735次

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

    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

    相关文章

      网友评论

      • 1c7:感谢,正需要。

      本文标题:React Native 速成 008 — 布局神器 Grid

      本文链接:https://www.haomeiwen.com/subject/jkuxfxtx.html