用 React 编写移动应用 React Native

用 React 编写移动应用 React Native

MIT
JavaScript
跨平台
Facebook
2015-03-23
_icode

ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。

React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。

在幕后,React Native在主线程之外,在另一个背景线程里运行JavaScript引擎,两个线程之间通过一批量化的async消息协议来通信(有一个专门的React插件)。

UI方面React Native提供跨平台的类似Flexbox的布局系统,还支持CSS子集。可以用JSX或者普通JavaScript语言,还有CoffeeScript和TypeScript来开发。有评论说,React的UI层模型要比UIKit好很多。

更好的是,由于基于Web技术,开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况,刷新一下就行,无需编译,爽吧。

React Native比起标准Web开发或原生开发能够带来的三大好处:

  1. 手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。

  2. 原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。

  3. 样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

原生 iOS 组件:

var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({
  render: function() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

触摸事件处理:

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <TouchableHighlight onPress={() => console.log('pressed')}>
          <Text>Proper Touch Handling</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

布局:

var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;

var ReactNative = React.createClass({
  render: function() {
    return (
      <View style={styles.row}>
        <Image
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.image}
        />
        <View style={styles.text}>
          <Text style={styles.title}>
            React Native
          </Text>
          <Text style={styles.subtitle}>
            Build high quality mobile apps using React
          </Text>
        </View>
      </View>
    );
  },
});
var styles = StyleSheet.create({
  row: { flexDirection: 'row', margin: 40 },
  image: { width: 40, height: 40, marginRight: 10 },
  text: { flex: 1, justifyContent: 'center'},
  title: { fontSize: 11, fontWeight: 'bold' },
  subtitle: { fontSize: 10 },
});

扩展:

// Objective-C

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule
- (void)processString:(NSString *)input callback:(RCTResponseSenderBlock)callback
{
  RCT_EXPORT(); // available as NativeModules.MyCustomModule.processString
  callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);
}
@end
// JavaScript

var React = require('react-native');
var { NativeModules, Text } = React;

var Message = React.createClass({
  render: function() {
    getInitialState() {
      return { text: 'Goodbye World.' };
    },
    componentDidMount() {
      NativeModules.MyCustomModule.processString(this.state.text, (text) => {
        this.setState({text});
      });
    },
    return (
      <Text>{this.state.text}</Text>
    );
  },
});
的码云指数为
超过 的项目
加载中

评论(32)

h
heshanfu
推荐一个不错React Native UI / UX库的精选列表:React Native Examples
O
OSC_KqUVIY
react 的基础学习!作为一个纯粹的小白如何能最基础的搞懂 它的作用 使用方法!
372630243
372630243
APP软件程序员 快来帮忙 qq 692950235
学习运营的程序猿
学习运营的程序猿
ReactNative视频教程 链接:http://pan.baidu.com/s/1dFJykKx 密码:nf2n
格林斌
格林斌
mark
obaniu
obaniu
#React Native#现在才意识到其ListView的垃圾,搞个新坑Better ListView - FlatList https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32
红薯
红薯
已销号
已销号
vincent1988
vincent1988
我只想问问,有张图片上看起来是ios模拟器和chrome搭配的,这个怎么玩的? #React Native#

React Native 0.57.8 发布,使用 React 编写原生应用的框架

React Native 0.57.8 发布了,要注意的是,当升级到这个版本时,至少需要将 react 和 react-test-renderer 升级到 "16.6.0-alpha.8af6728",这是为即将到来的 React "16.6.3" 的 "first cla...

2018/12/17 08:08

来吐槽吧,说说你对 React Native 有哪些不满意的地方?

昨日,来自 Facebook React Native 团队的工程师经理 cpojer(Christoph Nakazawa) 在 React Native 社区的 GitHub 主页中新开了一个 issue,旨在收集各位开发者在使用 React Native 时遇到的...

2018/12/07 08:18

React Native 发布关于重构的具体细节和路线图

6月中旬开源中国曾报道过 Facebook 要对 React Native 进行大规模重构,旨在使其更轻量,更具灵活性,更适应 JavaScript 生态圈的发展。现在 Facebook 正式公开了关于重构 React Native 的一...

2018/11/03 08:04

React Native 0.57.4 发布,使用 React 编写原生应用的框架

React Native 0.57.4 已发布! 要注意的是,当升级到这个版本时,至少需要将 react 和 react-test-renderer 升级到 "16.6.0-alpha.8af6728",这是为即将到来的 React 16.6.0 的 "first class...

2018/10/26 07:42

Airbnb:我们为什么会选择放弃 React Native

今年6月,Airbnb 技术团队宣布,Airbnb 将放弃使用 React Native,回归到使用基于原生技术的自有框架开发 App。作为一家世界级顶尖公司,在对 React Native 投入大量精力后,突然决定弃它而去...

2018/09/28 08:22

React Native v0.57.0 正式发布,更稳定更好用

React Native 0.57.0 已发布,此版本包含 73 位贡献者提交的 599 个 commit ,解决了许多问题,并带来了一些令人兴奋的改进。 值得关注的变化: WKWebView 现在可以在 WebView 组件中使用(i...

2018/09/14 07:53

React Native 0.57.0-rc.2 发布,原生应用框架

React Native 0.57.0-rc.2 发布了,React Native 可以基于目前大热的开源 JavaScript 库 React.js 来开发 iOS 和 Android 原生 App。 React Native比起标准Web开发或原生开发能够带来的三大好...

2018/08/23 07:38

Airbnb 之后,Udacity 也加入弃用 React Native 队列

在线教育机构 Udacity 宣布放弃使用 React Native。 上个月我们报导过 Airbnb 决定弃用 React Native 的消息,一瞬间仿佛 RN 变成了危险、不可靠的角色,而最近在 Udacity 的 Media 博客中,...

2018/07/07 07:17

React Native v0.56.0 稳定版发布,包含大量重要变化

React Native v0.56.0 已发布,这也是属于 6 月的更新发布! 开发团队表示,自3月以来,超过 60 位贡献者贡献了 816 个 commit。另外,由于这个新版本有一些重要的破坏性变化需要大量的额外工...

2018/07/05 08:14

Airbnb 弃用之后,我们还应该用 React Native 吗?

在过去几年,当人们谈到 React Native 时,都会马上联想到 Airbnb 在这方面做得非常出色。然而,近日,Airbnb 技术团队在 Medium 上发布的博客却让事态出现了惊天逆转,Airbnb 官方宣布停止使...

2018/06/27 08:05

没有更多内容

加载失败,请刷新页面

1
回答
react native 跳转登录页面隐藏TabNavigator

大体使用是TabNavigator 包含 Navigator,这样TabNavigator 的item一直在底部,但现在是登录界面需要隐藏TabNavig...

2017/10/10 14:47
2
回答
如何写出低碳环保的 Android 代码

随着环境问题越来越严重,人们越来越重视低碳环保的生活方式。作为码农的我们自然也应该为环保做出应有的贡献。那么什么是低碳环保,简而言之就是就是低能量、低消耗...

2016/04/28 09:38
1
回答
React Native 调试问题

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown...

2018/05/31 20:25
7
回答
ionic react-native和native开发移动app到底那个好

ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,...

2016/02/27 10:45
39
回答
高手问答第 192 期 —— 深入认识 React Native — 跨平台移动开发必备
局长 的回答 2018/04/11 16:09
最佳答案
高手问答第 192 期 | 深入认识 React Native — 跨平台移动开发必备 @白兔小乖 @FlashCHen @自东土大唐而来 @黄图哥 @belief_888 恭喜以上五位用户获得《React Native全教程:移动端跨平台应用开发》图书一本 请尽快私信@局长 告知快递信息(格...
1
回答
React-native Picker组件无法更新selectedValue的值?

由于需要根据服务器的配置生成对应的UI 逻辑是 1、获取服务器配置 2、将配置的list放到第一个picker中 3、监听onValueChange事件更...

2018/03/05 15:34
8
回答
用react native 开发安卓是否靠谱?

有没有人有实际成功的项目经验

2018/01/30 11:46
48
回答
开始自己做 App 产品谋生,看能支持多久

工作多年之后,总想试试看自己做产品来销售谋生能不能行,所以就做了自己的应用,看能支持多久。 想在还年轻的时候,体验一下,都说很难,看看到底如何,积累点经验...

2017/11/28 14:15
2
回答
react-native 启动之后就结束了

米3刷的是5.1系统。react-native run-android 之后把apk装到手机上就结束了。不知道什么原因,是不是系统的原因,怎么破?

2017/09/12 17:29
2
回答
国内有没有用RN(React Native)做的比较成功的APP?

目前,考虑做手机APP,打算用RN(React Native)做,想问问,国内有没有用RN(React Native)做的比较成功的APP? 求推荐一两个...

2017/07/25 11:49

没有更多内容

加载失败,请刷新页面

[react-native]-ReactNative为iOS打包ipa文件

ReactNative为iOS打包ipa文件: [点击查看](http://oysgnk0c4.bkt.clouddn.com/yy/mark/ReactNative/REACT-NATIVE%20%20%20iOS%20ipa%E6%96%87%E4%BB%B6.html?t=1524637972)...

2018/04/25 14:34
42
0
关于ReactNative0.56版本Flatlist列表内容跳动的问题

Reactnative的版本升级一直是一个工作量比较的大的事情,每次升级都可能伴随着很多的坑。 前段时间在升级到0.56版本的时候发现一个问题,在flatlist使用中,加载多页后,列表项内容开始进行上...

01/04 12:18
6
0
[react-native]-ReactNative生命周期

ReactNative生命周期函数: [点击查看](http://oysgnk0c4.bkt.clouddn.com/yy/mark/%E7%AE%80%E4%B9%A6-files/RN/8%E3%80%81React-Native%E7%BB%84%E4%BB%B6%E7%9A%84%E7%94%9F%E5%91%BD%E5...

2018/04/25 14:44
11
0
新版React Native+Redux打造高质量上线App

地址下载 新版React Native+Redux打造高质量上线App Redux+FlatList等高级组件+自定义组件+原生模块调用+RN混合开发+全面屏适配与兼容 1.具备JavaScript、ES5,ES6,React 前端基础;2.具备R...

01/13 00:18
12
0
createMaterialBottomTabNavigator

今天做了一个react native 的createMaterialBottomTabNavigator,所使用的相关资料如下 官方文档:https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html 2 android项目,...

2018/11/07 10:06
36
0
招聘ios team leader

招聘ios team leader!(北京,名企) 要求:1、5年以上ios开发经验,统招公办本科以上。2、要求至少完整的参与过一个商业手机应用或者是游戏的开发。 重点:ReactNative Hybrid开发经验是非常...

2018/05/22 10:03
2
0
北京名企招聘ios team leader

招聘ios team leader!(北京,名企) 要求:1、5年以上ios开发经验,统招公办本科以上。2、要求至少完整的参与过一个商业手机应用或者是游戏的开发。 重点:ReactNative Hybrid开发经验是非常...

2018/05/22 10:04
1
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部