React Native 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
React Native 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: 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>
    );
  },
});
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

React Native 的相关博客

reactnative安装

React Native 介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是React 在原生移动应用平台的...

ReactNative快速入门

首先放图 这就是我通过简单的搭建环境写出的helloworld和使用的button组件。 那么搭建环境如何搭建呢? 使用的软件有:Node ...

ReactNative和小程序混编

背景 本文我们将开一下脑洞,在 ReactNative 工程基础上下集成及运行小程序方案。 先看一下效果如下: 环境搭建 npm install ...

ReactNative前端开发者

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

ReactNative学习线路

基础与入门 学习网站:《ReactNative基础与入门》-评分9.5 https://www.imooc.com/learn/808 Github上RN相关相关 1、学习Rea...

ReactNative开发环境配置

#ReactNative开发环境配置 ###核心理念:既拥有Native的用户体验,又保留React的开发效率. 目前,React Native基本完成了对多端...

初始 ReactNative

https://reactnative.cn/docs/getting-started.html 中文官方地址 https://www.jianshu.com/p/95137688897a 安装。 可能遇到的...

ReactNative和小程序混编

背景 本文我们将开一下脑洞,在 ReactNative 工程基础上下集成及运行小程序方案。 先看一下效果如下: 环境搭建 npm install ...

ReactNative(0.54)总结

RN简单来说,就是ReactJs+java+ObjectC混合开发,跨平台App Part1: 1.首先安装RN运行环境需要:JDK,NodeJs,Python2,React-Na...

评论 (34)

加载中
推荐一款功能强大的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 ! ^_^
05/29 10:56
回复
举报
推荐一个不错React Native UI / UX库的精选列表: React Native Examples
2018/11/22 22:12
回复
举报
react 的基础学习!作为一个纯粹的小白如何能最基础的搞懂 它的作用 使用方法!
2018/09/26 22:43
回复
举报
打分: 推荐
APP软件程序员 快来帮忙 qq 692950235
2017/11/25 16:19
回复
举报
打分: 力荐
ReactNative视频教程 链接:http://pan.baidu.com/s/1dFJykKx 密码:nf2n
2017/10/07 20:42
回复
举报
打分: 推荐
mark
2017/02/26 21:25
回复
举报
#React Native#现在才意识到其ListView的垃圾,搞个新坑Better ListView - FlatList https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32
2017/02/06 12:27
回复
举报
还不太理解,应该是好东西 React Native
2015/03/27 07:01
回复
举报
有入门视频教程吗? React Native
2015/03/27 07:29
回复
举报
好讨厌在 js 里面写模板。 React Native
2015/03/27 07:46
回复
举报
更多评论
34 评论
890 收藏
分享
返回顶部
顶部