用 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>
    );
  },
});
的码云指数为
超过 的项目
加载中

评论(34)

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
你来人间一趟
你来人间一趟
还不太理解,应该是好东西 React Native
GDP_搞地皮
GDP_搞地皮
有入门视频教程吗? React Native
开源中国匿名会员
开源中国匿名会员
好讨厌在 js 里面写模板。 React Native
假正经哥哥
假正经哥哥
不明觉厉 React Native

React Native 0.61.0 发布,使用 React 编写原生应用

React Native 0.61.0 发布了,这是一个稳定版本,此版本带来的一些主要变化如下: 全新的热加载体验,称为“快速刷新”(Fast refresh)。它是默认开启的,可以在开发人员菜单下访问。敬请期...

2019/09/26 06:57

React Native 0.60.5 发布,使用 React 编写原生应用

React Native 0.60.5 发布了,这是一个补丁版本,更新内容如下: 新增 为新项目添加了默认的 Prettier 配置 (f4d5e8c by @jpdriver) Android 将 showSoftInputOnFocus 添加到 TextInput (b47...

2019/08/15 07:05

React Native 0.60.4 发布,修复新 JS 引擎相关问题

React Native 0.60.4 发布了,此版本修复了两个与 Hermes 相关的 bug: 修复未启用 Hermes 时的源映射 生成 assets/ 之外的源映射 Hermes 是 React Native 0.60.2 版本引入的一个小巧轻便的 ...

2019/07/26 07:36

React Native 0.60.2 发布,带来全新 JS 引擎 Hermes

React Native 0.60.2 发布了,此版本带来了 Chain React Conf 2019 上宣布的 Hermes JavaScript 引擎。 Hermes 是一款小巧轻便的 JavaScript 引擎,针对在 Android 上运行 React Native 进行...

2019/07/13 07:34

React Native 0.60.0 发布,使用 React 编写原生应用

React Native 0.60.0 稳定版发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 主要更新内容如下: 支持 AndroidX 完全删除 WebView 和 Geolocation 默认 CocoaPods ...

2019/07/05 07:13

React Native 0.60.0 RC1 发布,支持 AndroidX

React Native 0.60.0 的第一个候选版本发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 主要更新内容如下: 支持 AndroidX 完全删除 WebView 和 Geolocation 视图能...

2019/06/11 06:59

React Native 0.59.9 发布,使用 React 编写原生应用

React Native 0.59.9 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版本是针对几个 ScrollView 回归的补丁修复版本,更新内容如下: 改动 如果未在配置中指定 ...

2019/06/07 07:48

React Native 0.59.8 发布,使用 React 编写原生应用

React Native 0.59.8 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 新增 为非值动画节点添加侦听器 默认设置 ScrollView thr...

2019/05/10 07:24

React Native 0.59.4 发布,使用 React 编写原生应用

React Native 0.59.4 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 改动 Jest transform @react-native-community 包现在是默...

2019/04/10 06:50

React Native 0.59.2 发布,使用 React 编写原生应用

React Native 0.59.2 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 安卓端改动 向所有使用 Conscrypt 的安卓版本提供 TLS 1....

2019/03/26 07:38

没有更多内容

加载失败,请刷新页面

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

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

2017/10/10 14:47
3
回答
如何写出低碳环保的 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

没有更多内容

加载失败,请刷新页面

【HAVENT原创】Mac 下编译 ReactNative(CRN) 踩坑记录

最近在研究 ReactNative 的分包,所以下载了携程的CRN代码示例进行参考学习,但是在 Mac 系统下却始终无法在 Xcode 下编译通过,因此记录下踩坑过程。 最初以为是我的 Xcode 版本问题,因此心...

2019/06/25 18:20
55
0
RN Listview在设置 flexDirection: 'row', flexWrap: 'wrap',后不能完全显示数据的问题

6 ReactNative ListView component calculates how many rows to render on initial component mount using initialListSizeproperty. By default the initialListSize is set to 10. For re...

2019/06/30 10:47
84
0
ReactNative集成百度语音合成

语音交互是现今应用最多的智能交互方式,在人工智能越来越火的当下应用十分广泛,所以特别针对车内环境,在驾驶员安心驾驶的时候,用语音可以安全的进行操控。恰好新版项目中要加入语音播报功...

2018/12/17 10:26
56
0
关于ReactNative0.56版本Flatlist列表内容跳动的问题

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

2019/01/04 12:18
294
0
ReactNative入门教程-组件生命周期函数

1.组件实例化阶段 defaultProps: 设置组件的初始属性值,比如设置默认Color,width等,可以在通过this.props获取相应的值 constructor(props): 这里通过this.props可以获取defaultProps设置的...

2018/12/14 11:04
42
0
React Native 混合开发(Android篇)

在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。 ...

2019/07/05 10:43
270
0
一步一步在Windows下搭建React Native Android开发环境

搭建JAVA开发环境 根据操作系统分为x86或x64位的,下载jdk1.8以上的版本, 本机安装时的java版本:jdk-8u45-windows-x64.exe 配置JAVA的环境变量 [html] view plain copy print? JAVA_HOME ...

2017/10/19 10:19
303
0
IOS开发错误library not found for -lXXX

最近在使用ReactNative技术搭建新项目的过程中,在集成神策分析时,在进行IOS端配置的时候Xcode进行build项目的时候遇到如下报错:library not found for -lRNSensorsAnalyticsModule,忘记截...

2019/02/27 14:32
44
0
Android圆角布局、天气应用、树状图、日食动画、仿饿了么导航效果等源码

Android精选源码 Android通用圆角布局源码 Android天气应用源码,界面美观 一个支持定制的树状 Android 自定义View PIN 码专用输入控件,支持任意长度和输入任意数据 Android实现日食加载动画...

2019/01/08 15:26
164
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部