从零开始学习React Native，先重布局开始学起

sunsmell 发布于2019-06-24 19:32 / 1773人阅读

摘要：五图片文字混合布局美食之旅呼和浩特希拉穆仁草原响沙湾鄂尔多斯起省千款特价走过路过不错过海外精选百元出境游周边玩乐十元度周末具体的样式见源代码。六底部布局首页行程客服我的具体的样式见源代码。

React Native布局学习，模仿携程的首页内容，可以很好的让我们练习一下flexbox布局，最后完成的效果图如下：

附上Github地址，欢迎star

一、布局主要内容如下：

1、搜索栏的布局
2、图片轮播
3、类似九宫格的布局
4、图片、文字混合布局
5、底部布局

主要使用的控件

StyleSheet
Text
PixelRatio
ScrollView
Image
View
TextInput

记得导出与引用

导出多带带的样式

module.exports= Search;

在主文件中使用

const Search = require("./search");

二、搜索栏布局实现

class Search extends Component {
  render() {
    return (
      
        
          
          
          
        
        
          
        
      
    );
  }

具体的样式见源代码。

三、图片轮播

这里使用了开源的组件react-native-swiper
Github项目地址，里面有具体的使用介绍
记得安装完后，重新启动一下package,不然会报错
下面是安装的代码，具体见Github

$ npm i react-native-swiper --save

}
                  scrollsToTop={true}
              >

具体的样式见源代码。

四、类似九宫格的布局

具体的样式见源代码。

五、图片、文字混合布局



              
                
                
                  
                    美食之旅·呼和浩特+希拉穆仁草原+响沙湾+鄂尔多斯...
                  

                  
                    
                      ¥2899起
                    

                    
                      
                        省¥1100
                      
                    
                  
                
              


              

                
                  
                    
                      千款特价
                    
                    
                      走过路过不错过
                    
                  

                  
                    
                  
                

                
                  
                    
                      海外精选
                    
                    
                      百元出境游
                    
                    
                  

                  
                    
                      周边玩乐
                    
                    
                      十元度周末

具体的样式见源代码。

六、底部布局

class Tab extends Component {
  render() {
    return (
      
        
          
          首页
        

        
          
          行程
        

        
          
          客服
        

        
          
          我的
        
      
    );
  }

具体的样式见源代码。

私有云混合云从零开始学习编程从零开始学机器学习从零开始学习hadoop 从零开始学习数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/12899.html

React VR 快速入门完全教程

摘要：快速入门什么是是一个开放源代码的库，为呈现的数据提供了视图渲染。最后，项目根组件应该通过来进行注册，以便能够进行打包和正常运行。基本思想是渲染一个立方体，并将观众置于中心，随后移动。表示从指定方向平均照亮所有物体的光源。 React VR 快速入门什么是React React是一个开放源代码的JavaScript库，为HTML呈现的数据提供了视图渲染。React视图通常使用指定的像H...

andot 2019-08-20 17:16 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0
从零开始的 Android 新项目 - 收藏集 - 掘金

摘要：从零开始的新项目高级篇掘金承接上篇，本篇继续讲解一些更加进阶的内容，包括列表绑定自定义属性双向绑定表达式链表达式动画注入测试等。从零开始的 Android 新项目 8 - Data Binding 高级篇 - 掘金承接上篇，本篇继续讲解一些更加进阶的内容，包括：列表绑定、自定义属性、双向绑定、表达式链、Lambda表达式、动画、Component注入（测试）等。 Demo源码库：D...

LeviDing 2019-06-24 17:52 评论0 收藏0
React Native 在 Airbnb(译文)

摘要：声明有助于保持我们的同步与底层状态的声明性质。值得注意的是，这些挑战并非特定于。这导致或上出现不一致或意外错误。崩溃监控我们使用在和上进行崩溃报告。桥接有一个桥接，用于在本机和之间进行通信。 showImg(https://segmentfault.com/img/bVbd0FA?w=740&h=433);在Android，iOS，Web和跨平台框架的横向对比中，React Nativ...

kevin 2019-08-05 14:26 评论0 收藏0