美文网首页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

相关文章

  • React Native 速成 008 — 布局神器 Grid

    很多时候我们需要各种各样的页面布局。 React Native Elements 中提供了一个布局神器,就是 Gr...

  • React Native 之 flexbox布局

    React Native 之 flexbox布局 本文详情本文讲解React Native中的布局,该布局用CSS...

  • react-native 布局篇

    react-native 布局篇之单位换算(px转dp) react-native 布局篇之flexbox rea...

  • React Native实战开发目录

    目录 React Native实战开发1:搭建开发环境 React Native实战开发2:布局 React Na...

  • React Native学习资料

    React 入门实例教程React-Native入门指南Flex 布局教程:语法篇React Native探索(二...

  • React Native 布局

    React Native 版本 0.55.4 在使用React native 开发过程中,遇到了很多布局问题。 一...

  • react native布局笔记

    react native 布局笔记 宽高 在react native中,高宽都是无单位的(unitless),它代...

  • react native 组件

    react native 【视频】开发一个基于React Native的简易demo--视频组件+布局 https...

  • Grid布局

    今天介绍一个新的布局神器---Grid布局,也叫做栅格布局。 本文分为以下几个部分: 给container定义gr...

  • 绿侠快充App技术整理

    React Native 原理 ES6 Flex 布局 React Navigation MobX 视频教程 网...

网友评论

  • 1c7:感谢,正需要。

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

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