React Native初探(转)

最新推荐文章于 2024-04-15 09:58:03 发布
最新推荐文章于 2024-04-15 09:58:03 发布
阅读量389 收藏 1
点赞数
分类专栏： android技术文档

很久之前就想研究React Native了，但是一直没有落地的机会，我一直认为一个技术要有落地的场景才有研究的意义，刚好最近迎来了新的APP，在可控的范围内，我们可以在上面做任何想做的事情。

PS：任何新技术的尝鲜都一定要控制在自己能控制的范围内，失败了会有可替换方案，不要引起不可逆的问题，这样会给团队造成灾难性的后果。

事实上，RN经过一段时间发展，已经有充分数量的人尝试过了，就我身边就有几批，褒贬也不一：

① 做UI快

② 还是有很多限制，不如原生Native

③ 入门简单，能让前端快速开发App

④ iOS&Android大部分代码通用

⑤ code-push能做热更新，但是用不好依旧坑

......

在得到一些信息后，可以看出，要用RN高效率的做出比较不错的App是有可能的，单看投入度与最初设计是否合理，而且现在关于React Native的各种文档是相当丰富的，所以这个阶段想切入RN可能是一个不错的选择。

带着试试不吃亏的想法，我们开始今天的学习，这里是一些比较优质的学习资料：

https://github.com/reactnativecn/react-native-guide

准备阶段

搭建开发环境

http://reactnative.cn/docs/0.36/getting-started.html

官方的例子其实写的很好了，我照着官方的例子能很好的跑起来，大家自己去看看吧

这里在运行时候要注意一下，我因为开启了FQ工具，一运行就crash，这里猜测是翻（科学上网法）墙工具对localhost造成了影响，导致不能读取文件，这个可能涉及到RN底层实现，我们后面深入了再去做研究，这里关闭FQ工具即可。

然后第二个问题，是http的图片展示不出来，这里折腾了很久，却发现后面的章节有了说明，app默认只支持https的链接，这里大家改下配置即可：

https://segmentfault.com/a/1190000002933776

RN中的js使用的是比较新的语法，这里也需要大家进行学习，我学习的感受是ES6提供了很多语法糖，但是有几个东西也要注意。

Class

JavaScript之前的继承全部是复写原型链模拟实现的，作为大型应用框架，继承是必不可少的，所以ES6直接将这块API化了，我这里写一个简单的demo：

复制代码

 1 class Animal {
 2     constructor(name) {
 3         this.name = name;
 4     }
 5     say() {
 6         console.log('我是' + this.name);
 7     }
 8 }
 9 
10 class Person extends Animal {
11     say() {
12         console.log('我是人类');
13         super.say();
14     }
15 }
16 
17 var p = new Person('叶小钗')
18 p.say();

复制代码

1 /*
2  我是人类
3  我是叶小钗
4  */

Module

我们一般使用requireJS解决模块化的问题，在ES6里面提出了Module功能在官方解决了模块化的问题，这里优缺点不是我们考虑的重点，简单了解下语法，两个核心为：

① export

② import

ES6以一个文件为单位，一个文件可以多个输出，这里以RN的一个引用为例：

复制代码

1 import React, { Component } from 'react';
2 import {
3   AppRegistry,
4   StyleSheet,
5   Text,
6   View
7 } from 'react-native';
8 import styles from './static/style/styles.js';

复制代码

可以假想，这里一定会有一个react文件，并且里面可能是这个样式的：

export default class React......

expoet class Component ......

PS：一个文件只能有一个default

输出的default一定会出现，不使用大括号包裹，其余部分随意输出，这里与我们使用require或有不同，需要注意。

应该说ES6提供了很多语法糖，有人喜欢，有人不喜欢，这个看爱好使用吧，比如=>箭头函数。了解了以上关系，再配合ES6的一些文档，基本可以写RN的代码了。

城市列表

拆分目录

这里，我们做一个城市列表，真实的访问接口获取数据，然后渲染页面，看看做出来效果如何。

首先，我们初始化一个RN项目：

react-native init Citylist

然后使用Xcode打开iOS中的项目，编译运行：

 View Code

这里除了index.io.js，其他文件我们不必理睬，我们做的第一件事情是，将样式文件剥离出去，新建static文件夹，加入images和style，将样式文件移入style文件，新建style.js：

复制代码

 1 import {
 2     StyleSheet
 3 } from 'react-native';
 4 
 5 export let styles = StyleSheet.create({
 6     container: {
 7         flex: 1,
 8         justifyContent: 'center',
 9         alignItems: 'center',
10         backgroundColor: '#F5FCFF',
11     },
12     welcome: {
13         fontSize: 20,
14         textAlign: 'center',
15         margin: 10,
16     },
17     instructions: {
18         textAlign: 'center',
19         color: '#333333',
20         marginBottom: 5,
21     },
22 });

复制代码

然后首页代码再做一些改动：

复制代码

 1 import React, { Component } from 'react';
 2 import {
 3   AppRegistry,
 4   Text,
 5   View
 6 } from 'react-native';
 7 
 8 import {styles} from './static/style/style';
 9 
10 
11 export default class Citylist extends Component {
12   render() {
13     return (
14       <View style={styles.container}>
15         <Text style={styles.welcome}>
16           Welcome to React Native!
17         </Text>
18         <Text style={styles.instructions}>
19           To get started, edit index.ios.js
20         </Text>
21         <Text style={styles.instructions}>
22           Press Cmd+R to reload,{'\n'}
23           Cmd+D or shake for dev menu
24         </Text>
25       </View>
26     );
27   }
28 }
29 
30 AppRegistry.registerComponent('Citylist', () => Citylist);

复制代码

PS：这里有一个箭头函数

1 () => Citylist
2 //===>
3 function () {
4   return Citylist;
5 }

静态资源剥离后，我们先不处理其它的，我们来做数据请求。

数据请求

RN虽然内置了ajax库，但是一般推荐使用RN自带的Fetch，最简单的使用是：

fetch('https://mywebsite.com/mydata.json')

PS：我们在学习RN的时候，也是在学习神马方式是适合的，或者说熟悉使用合适的组件

请求一个接口是这样写的（使用promise）：

复制代码

1 fetch('https://apikuai.baidu.com/city/getstartcitys')
2 .then((response) => response.json())
3 .then((jsonData) => {
4   console.log(jsonData);
5 })
6 .catch((e) => {
7   console.log(e)
8 })

复制代码

这里打开调试环境一看，输出了我们要的数据：

一般来说，我们需要对数据请求应该封装为一个底层库，这里只做一些简单改造，真实项目不会这样做：

复制代码

 1 export default class Citylist extends Component {
 2   getdata(url, suc, err) {
 3     return fetch(url)
 4       .then((response) => response.json())
 5       .then((data) => {
 6         if(data.errno == 0) {
 7           suc && suc(data.data)
 8         }
 9       })
10       .catch((e) => {
11           console.log(e)
12       });
13   }
14   render() {
15 
16     this.getdata('https://apikuai.baidu.com/city/getstartcitys', function(data) {
17       s = ''
18     });
19 
20     return (
21       <View style={styles.container}>
22         <Text style={styles.welcome}>
23           Welcome to React Native!
24         </Text>
25         <Text style={styles.instructions}>
26           To get started, edit index.ios.js
27         </Text>
28         <Text style={styles.instructions}>
29           Press Cmd+R to reload,{'\n'}
30           Cmd+D or shake for dev menu
31         </Text>
32       </View>
33     );
34   }
35 }

复制代码

PS：这里的使用不一定正确，先完成功能再改进吧

我们取所有的城市cities，这个数据量很大，有1000多条记录，也可以测试下拖动效率了，这里为类加入构造函数，因为列表是可变的，暂时把列表数据归为state（react也不是太熟，如果有问题后续优化，先完成功能）：

复制代码

1 constructor(props) {
2   super(props);
3   this.state = {
4     cities: []
5   };
6 }

复制代码

1 var scope = this;
2 //本来想使用箭头函数的，但是了解不太清楚，demo时候暂时这样吧
3 this.getdata('https://apikuai.baidu.com/city/getstartcitys', function(data) {
4   scope.state.citys = data.cities;
5 });

列表渲染

处理了数据问题后，我们开始做列表渲染，这里使用ListView组件，这个组件用以显示一个垂直滚动列表，适合长列表，两个必须的属性是datasource和renderRow：

dataSource：列表数据源

renderRow：逐个解析数据源中的数据，然后返回一个设定好的格式来渲染

简单书写代码：

 View Code

然后就这样了，虽然丑是丑点，但是还能看嘛，这里我们先不去理睬城市的排序，也不做搜索功能，我们先把布局处理下，他的丑陋我已经受不了了

样式处理

现在我们开始处理这段样式：

 View Code

 View Code

事件绑定

然后，我们再为每行数据加上点击事件，这里也做简单一点，打印出当前行的值即可：

复制代码

 1   onPressAction(data){
 2     alert(data.cnname)
 3   }
 4   render() {
 5     return (
 6       <View style={styles.container}>
 7           <ListView style={styles.listView} enableEmptySections={true}
 8               dataSource={this.state.cities}
 9               renderRow={(rowData) =>
10               <View style={styles.listItem}  >
11                   <Text onPress={() => this.onPressAction(rowData)}>{rowData.cnname}</Text>
12               </View>
13               }
14           />
15       </View>
16     );
17   }

复制代码

PS：我尼玛，这个RN的学习，很大程度就是一个个API或者组件的熟悉，这块不熟悉的话，做起来恼火的很

我这里开始想给Text设置边框，怎么都不能成功，后面就加了一层View就好了，这种小细节需要多摸索，这个是最终的结构：

结语

作为一个demo的话，这个例子基本可以说明一些问题的，虽然我本意是想做成这个样子的：）

通过这个例子，我们简单的学习了下RN的开发模式，做出来的感受是Facebook很强大，做了一个体系性的东西，举个例子来说（个人感受）

之前我们做Hybrid的时候Header是Native提供的，大概做法是这样的：

复制代码

 1 //Native以及前端框架会对特殊tagname的标识做默认回调，如果未注册callback，或者点击回调callback无返回则执行默认方法
 2 //back前端默认执行History.back，如果不可后退则回到指定URL，Native如果检测到不可后退则返回Naive大首页
 3 //home前端默认返回指定URL，Native默认返回大首页
 4 this.header.set({
 5     left: [
 6         {
 7             //如果出现value字段，则默认不使用icon
 8             tagname: 'back',
 9             value: '回退',
10             //如果设置了lefticon或者righticon，则显示icon
11             //native会提供常用图标icon映射，如果找不到，便会去当前业务频道专用目录获取图标
12             lefticon: 'back',
13             callback: function () { }
14         }
15     ],
16     right: [
17         {
18             //默认icon为tagname，这里为icon
19             tagname: 'search',
20             callback: function () { }
21         },
22     //自定义图标
23         {
24             tagname: 'me',
25             //会去hotel频道存储静态header图标资源目录搜寻该图标，没有便使用默认图标
26             icon: 'hotel/me.png',
27             callback: function () { }
28         }
29     ],
30     title: 'title',
31     //显示主标题，子标题的场景
32     title: ['title', 'subtitle'],
33 
34     //定制化title
35     title: {
36         value: 'title',
37         //标题右边图标
38         righticon: 'down', //也可以设置lefticon
39         //标题类型，默认为空，设置的话需要特殊处理
40         //type: 'tabs',
41         //点击标题时的回调，默认为空
42         callback: function () { }
43     }
44 });

复制代码

通过这个约定，我们的Native就会生成一系列headerUI：

而RN做了什么呢，他可能是实现了一个这样的标签（或者说是语法糖）：

<Header title="" right="[]" ></Header>

然后RN会自己去解析这个标签，生成上述的对象，然后生成Native的UI，这个我们其实也能做到，但是我们一个能做到，10个就不一定做得到了，RN牛的地方就牛在他提供了这么大一坨东西：

然后还有他一整套的样式体系，非常之大手笔，而通过RN的完善约定，生成了一套NativeUI，应该说来体验是非常高的，开发效率因为可以做到大部分iOS Android通用，虽然整体开发效率无法与Hybrid比肩，但绝对有其应用场景。

我们也有一些同事说了一些RN的问题，但是框架在发展，容器在优化，这些问题在某个时间点应该能解决的，总的说来，RN还是很有学习的价值，后面我可能会花很多功夫去进行落地！！！

为了汇集资源，这里引用这里的学习资源：https://github.com/reactnativecn/react-native-guide

React Native

React.js

ES6

系列教程

React Native探索系列教程

开源APP

研究源码也是一个很好的学习方式

图书

组件

由于已经有较好的组件库网站，这里就不做总结。可以直接查看如下网站，过后可能精选一部分优质组件出来 :P

工具

资源网站

业界讨论

ruizhenggang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React Native初探
weixin_33878457的博客
11-10 159
前言 很久之前就想研究React Native了，但是一直没有落地的机会，我一直认为一个技术要有落地的场景才有研究的意义，刚好最近迎来了新的APP，在可控的范围内，我们可以在上面做任何想做的事情。 PS：任何新技术的尝鲜都一定要控制在自己能控制的范围内，失败了会有可替换方案，不要引起不可逆的问题，这样会给团队造成灾难性的后果。 事实上，RN经过一段时间发展，已经有充分数量的人尝试过了，就我身...
react-native init
qq_32450111的博客
08-09 298
react-native init android –version 1.0
React Native使用init新建项目出现异常
YooHoeh的博客
07-10 2423
情况说明 最近在使用使用react-native init之后没有生成app.js, index.js等文件，缺少了很多文件，如图： 原因 因为近期rn更新，某些东西不适配，然后暂时能找到的方法就是指定较低版本的rn。 解决方案 使用 react-native init YourApp --verbose --version 0.53.0 进行init项目。...
ReactNative源码篇：通信机制
weixin_34245749的博客
09-28 407
关于作者 郭孝星，程序员，吉他手，主要从事Android平台基础架构方面的工作，欢迎交流技术方面的问题，可以去我的Github提issue或者发邮件至guoxiaoxingse@163.com与我交流。 更多文章：github.com/guoxiaoxing… 本篇系列文章主要分析ReactNative源码，分析ReactNative的启动流程、渲染原理、通信机制与线程模型等方面内容。 ...
React Native 学习笔记（一）--init 项目 和 运行项目
uana_777的博客
11-29 7140
首先，学习React Native首要的条件就是要有环境，至于怎么配置React Native大家可以在官网上按照步骤安装。不同的平台安装的步骤和需要的软件也不同，我这边是Windows环境（这里不说什么系统好，也不说哪一个系统差）。官网首页有下面的一段描述： 中文版： 最专业的翻译，最及时的资讯，最火爆的社区 使用前沿的JAVASCRIPT为IOS、ANDROID编写跨平台原生
ReactNative初探
01-27
官方文档（如http://reactnative.cn/docs/0.36/getting-started.html）提供了详细的步骤指导。确保在尝试新技术时，控制风险，避免对现有项目产生负面影响。 ### ES6语法基础： React Native主要基于ES6编写，因此...
ReactNative初探.pdf
09-15
ReactNative初探.pdf
react-native 环境搭建建议（windows）
KeBo's Blog
07-15 222
昨天从下午开始弄react-native环境，一直没弄好。版本是最新的，没有index.android.js文件，说什么是合并到index.js文件中了，网上各种方法都试了，react-native start 还是在localhost:8081/index.android.bundle?platform=android 中出错，提示找不到index.android.js文件！ 大家注意，如果访...
React Native商城项目实战08 - 设置“More”界面cell
08-22 1569
知识点 关于cell上的Switch开关 自定义可复用的cell More/CommonCell.js: /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react'; import { AppR
探索React Native China: 一站式跨平台移动应用开发
最新发布
gitblog_00063的博客
04-15 438
探索React Native China: 一站式跨平台移动应用开发 项目地址:https://gitcode.com/reactnativecn/react-native.cn 项目简介 React Native China 是一个以中文为主要内容的React Native资源库和文档站点，致力于提供最全面、最新、最准确的React Native教程、指南和API参考。它是中国开发者接触并学习R...
practical React Native
11-17
Discover how to use React Native in the real world, from scratch. This book shows you what React Native has to offer, where it came from, and where it’s going. You’ll begin with a solid foundation of practical knowledge, and then build on it immediately by constructing three different apps. You’ll learn how to use each feature of React Native by working on two full projects and one full game. These aren’t just simple React Native Hello World examples (although you’ll naturally start there!) but are apps that you can, if you so choose, install on your mobile devices and use for real. Throughout this book, you’ll gain real-world familiarity with React Native as well as supporting components from Expo, NativeBase, React Navigation and the Redux and Lodash libraries. You’ll also build server-side code for a mobile React Native app to talk to using the popular Node.js and Socket.io library, providing you a holistic view of things even beyond React Native. And, you’ll see many helpful tips, tricks and gotchas to watch out for along the way! Practical React Native offers practical exercises that will give you a solid grasp of building apps with React Native, allowing you to springboard into creating more advanced apps on your own.Creating a game with React Native will allow you to see a whole other perspective on what React Native can do. What You’ll Learn Master the basics of React Native Create a logically structured project Review interface elements, such as widgets, controls, and extensions Build layouts Work with Expo, an open source toolchain Who This book Is For The primary audience is mobile developers and anyone looking to build for multiple mobile platforms and trying to do so with a codebase that is largely the same across all. Readers will need a decent foundation, but not necessarily be experts in, HTML, CSS, and JavaScript, but I’ll assume little beyond that.
维护积极的react native，为什么会有人造谣react native不维护了，停止维护。
热门推荐
qq996150938的专栏
11-01 1万+
其实近几年我一直关注react -native，他一直更新频繁，0.60大重构，升级了js执行引擎Hermes，当前已经0.70.4版本了。性能越来越提高，但是总感觉到有人在刷百度关键词，只要输入react-native后面就自动提示热搜关键词“react-native 停止维护”，这误导很多人以为真的不维护了，似乎是有人蓄意破坏技术舆论氛围，严重影响技术发展。
关于react-native init 创建项目报错 cli.init is not a function 问题解决
斗师——Ace
08-17 3084
2. 解决：产生这个问题的原因是：使用这种方式创建工程，react-native版本是0.69 版本上不适用。各位可以检查下自己安装的React-native的版本。改成：npx react-native init chapter2 --version 0.68.2 即可。1. 在react-native init appDemo 创建项目时，报错TypeError: cli.init is not a function....
VS+Qt5不自动生成moc文件的解决方法
jamesg37的专栏
10-29 933
碰到此类问题，一般都是对应的.h文件没有在generate file文件夹下自动生成对应的moc_filename.h所致。网上有很多关于这方面的答案，大致过程无外乎两种： 1、一种是新建工程，然后逐一将文件加入工程中，自然对应的moc“文件可能就有了”，注意，是可能哦。 2、采用右键点击对应.h文件，在属性对话框中参照已经生成moc文件的.h属性修改属性，具体步骤参见点击打开链接 第一种方法大多数可以解决，但是，这也忒...， 那就用第二种方法，可是全部修改后，moc文件...
给所有开发者的React Native详细入门指南
Marno 的博客
02-06 4563
本文为 Marno 原创，转载必须保留出处！ 公众号【 aMarno 】，关注后回复 RN 加入交流群 React Native 优秀开源项目大全：http://www.marno.cn
前端和React Native代码互转总结
weixin_33958366的博客
03-02 658
React Native出现的目的本就是“learn once, write anywhere”，Facebook希望人们能够学习一次，到处使用，但是同样是JS代码，从前端移植到RN，或者RN移植到前端，却并没有想象的那么容易。事实上除了语法相同外，还有很多不一样的地方，导致我们没法做到直接copy，以下是我在做迁移代码的时候，总结的一些经验 1 Antd Mobile Antd Mobile的蚂...
React Native中的图片缓存详解(二)
大灰狼的小绵羊哥哥的博客
03-23 1万+
尊重版权,未经授权不得转载 本项目来自wcandillon  文章来自江清清的技术专栏(http://www.lcode.org) 原文地址(需要翻墙):https://hackernoon.com/image-caching-in-react-native-96d8df33ca84#.uaznyr11h 1.基本介绍 我最近正在开发一个React Native项目
React native 之ES6语法（promise，箭头函数）
pursue的博客
11-19 1958
这里总结几个ES6与ES5区别中常用的几块。一、箭头函数ES6中提供了使用（=>）符号来定义函数。 箭头函数是用箭头符号在需要回调函数的地方之间定义不需要名称，代码简洁。 将需要的参数放在=>前的（）中即可，=>后就是函数体，就可以使用传入的参数。 如：var function = ()=>...;//这个是不需要参数的情况下 var function = (param) => param..
React-Native入门指导之iOS篇 —— 一、准备工作
weixin_33853794的博客
12-07 546
React-Native 入门指导系列教程目录 一、准备工作 (已完成) 二、项目介绍与调试 三、CSS样式与Flex布局 四、常用UI控件的使用 五、JSX在React-Native中的应用 六、事件与数据调用 七、自定义组件 八、动手写实例 九、发布与真机调试   写在前面 1. 什么是React-Native？ 　　 　　React-Native是：Faceboo...
Packt.React.and.React.Native.4th.Edition
06-27
"React and React Native 4th Edition - Build cross-platform JavaScript applications with native power for the web, desktop, and mobile" React 和 React Native 第四版是JavaScript开发者们全面且实用的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值