用 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)

rufeng008
rufeng008
推荐一款功能强大的RN快速开发库: 开源库名称:react-native-easy-app github 地址: https://github.com/chende008/react-native-easy-app 简书介绍: https://www.jianshu.com/p/88821b1607a7 开源库功能: 1 、AsyncStorage 访问封装 (一分钟实现一个简单、易用的持久化数据管理器) 2 、fetch 基础封装 (二十分钟实现一个复杂项目的 Http 请求框架组件的封装) 3 、UI 组件 基础封装 (明显提升布局工作效率) 4 、多屏适配 一行代码实现多屏无感知适配 看着功能挺不错的吧,有兴趣的同学可以了解下先,觉得不错的话,谢谢给个 star ! ^_^
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 0.63 发布,告警系统、颜色与交互能力改进

React Native 0.63 已经发布了,此版本主要亮点包括: 默认启用 LogBox <Pressable /> 组件 新增使用系统定义颜色的 API 默认启用 LogBox 社区一直以来反馈错误和警告很难在 React Native 中...

07/09 08:25

React Native 0.62 发布,默认支持 Flipper,新的暗黑模式

React Native 0.62 发布了,此版本一大亮点是默认支持 Flipper。 Flipper 是用于调试移动应用的开发人员工具,它在 Android 和 iOS 社区中都很流行,Flipper 提供以下功能: Metro Actions:...

04/07 07:38

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

没有更多内容

加载失败,请刷新页面

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

没有更多内容

加载失败,请刷新页面

reactnative安装

React Native 介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是React 在原生移动应用平台的衍生产物,使用JS、JSX、CSS开发原生应用,目前支持iOS和安卓两...

2019/09/29 22:11
27
0
ReactNative和小程序混编

背景 本文我们将开一下脑洞,在 ReactNative 工程基础上下集成及运行小程序方案。 先看一下效果如下: 环境搭建 npm install -g react-native-cli yarn 官方的环境搭建文档已经有详细的说明,...

05/15 15:13
26
0
ReactNative快速入门

首先放图 这就是我通过简单的搭建环境写出的helloworld和使用的button组件。 那么搭建环境如何搭建呢? 使用的软件有:Node 最新版,Python2.7,Android环境要有配置Android,首先安装jdk。最...

2018/08/14 10:09
50
0
ReactNative前端开发者

ReactNative前端开发者 文档版本0.0.2 Author: Necfol 说明: 本文档用于指导前端React Native的开发,如需开发其他其他框架应用,不适用本文档 前期准备 ReactNative 的基本概念ReactNative...

2018/11/14 10:12
40
0
ReactNative开发环境配置

#ReactNative开发环境配置 ###核心理念:既拥有Native的用户体验,又保留React的开发效率. 目前,React Native基本完成了对多端的支持,实现了真正意义上的面向配置开发:开发者可以灵活的使用H...

2019/02/11 20:44
32
0
初始 ReactNative

https://reactnative.cn/docs/getting-started.html 中文官方地址 https://www.jianshu.com/p/95137688897a 安装。 可能遇到的问题:https://blog.csdn.net/bbcv55/article/details/82930010...

2019/12/10 23:22
72
0
ReactNative学习线路

基础与入门 学习网站:《ReactNative基础与入门》-评分9.5 https://www.imooc.com/learn/808 Github上RN相关相关 1、学习React Native必看的几个开源项目 https://www.cnblogs.com/qiangxia...

2018/12/07 14:27
95
0
ReactNative和小程序混编

背景 本文我们将开一下脑洞,在 ReactNative 工程基础上下集成及运行小程序方案。 先看一下效果如下: 环境搭建 npm install -g react-native-cli yarn 官方的环境搭建文档已经有详细的说明,...

05/15 15:11
21
0
ReactNative(0.54)总结

RN简单来说,就是ReactJs+java+ObjectC混合开发,跨平台App Part1: 1.首先安装RN运行环境需要:JDK,NodeJs,Python2,React-Native-Cli客户端,ANDROID STUDIO(用于安装模拟器),WebStorm(IDE)...

2018/09/07 17:50
34
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部