当前位置：首页 > 软件库 > 手机/移动开发 > React 开源项目 >

React Native

用 React 编写移动应用

授权协议 MIT

开发语言 JavaScript

所属分类手机/移动开发、 React 开源项目

软件类型开源软件

地区不详

投递者鲜于光辉

操作系统跨平台

开源组织 Facebook

适用人群未知

软件概览

React Native 可以基于目前大热的开源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开发或原生开发能够带来的三大好处：

手势识别：基于Web技术（HTML5/JavaScript）构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。
原生组件：使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截，而React Native由于采用了原生UI组件自然没有此问题。
样式和布局：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>
    );
  },
});

使用案例

React-native是什么？

开发React-native，需要的技术栈，真的不少。你需要了解，react-native是什么？react-native开发所需的基础技术是什么？ react-native是什么？我们知道，传统的开发分为前端开发（web开发），ios开发以及android开发。不同的开发你需要懂得不同的相关技术，如：开发android你就要懂java语言，开发ios你需要懂object-c，开发web网页你
ReactNative 概述

近期看了下React Native ，整理了下简介支持平台：Native App(IOS、Android) 开发语言：JSX、JavaScript、Coffee Script、Type Script IDE：Nuclide 此外，Facebook还开源了对应的IDE(Nuclide)。Nuclide具有能够开发基于Hack的Web应用、支持React和React Native开发、集成了构建工
ReactNative 入门

一. ReactNaitive简称RN，使用React语法，使用内部提供的基础组件绘制界面，最终编译成基础组件。开发效率高于和版本发布效率高于原生开发，其开发出来的产品体验总体优于H5,但说实话比不上原生的产品体验。对于熟悉react框架的前端开发，上手容易。二、对比H5开发的差别 1.开发环境和本地调试上的差别，RN开发环境比较麻烦，最好对原生开发工具（Android Studio / XCo
react-native

我试图调用一个api，但出现错误“未处理的承诺被拒绝：错误：请求失败，状态码为500”。我不知道如何得到错误。我将api调用放在componentDidMount中。我不确定错误是来自redux实现还是来自我的api。这就是我所谓的api。成功登录后，我将用户名作为令牌，并使用它来调用另一个api。 state={ username: '', semcode: [ {} ] } compo
ReactNative数组操作

垃圾代码！只能用这句话来表述一下当前的工程 1、concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。 let A = [2,3,4,5,6] let B = [9,8,7] let C = A.concat(B) console.log("数组A"+JSON.stri
React Native

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native， React Native 官网：http://facebook.github.io/react-native/ GitHub 地址：https://github.com/jikexueyuanwiki/react-native React Nativ
React-Native (一)

环境搭建：（参考React-Native中文网-http://reactnative.cn/docs/0.30/getting-started.html#content) 1>根据React-Native中文网的介绍，先安装Chocolatey Chocolatey，可以认为是一个包管理工具，通过它，我们可以方便的下载和安装React-Native需要的环境。 Chocolatey的安装通过命令
ReactNative环境搭建

一、React Native概述 React是一个构建用户界面的JS框架，实现了数据的响应式和组件化开发，本身既可以用于Web网站项目，也可以用于创建移动端App项目。相较于Vue.js在移动端只能构建WebApp，React生态系统中有一个可以构建“真正原生App”的扩展 —— React Native，可以这样说：“React Native是React生态圈可以傲视其它对手的绝对功臣”。原
《ReactNative》之AsyncStorage的封装

AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。它用来代替LocalStorage。安装 npm install @react-native-community/async-storage 1.封装为DeviceStorage.js类 import AsyncStorage from '@react-native-communit
ReactNative常用命令

ReactNative常用命令创建项目 react-native init 项目名查看是否有设备连接 adb devices 运行Android工程 react-native run-android 安装Android正式包 react-native run-android --variant release 运行Ios工程 react-native run-ios 用指定设备运行Ios工程
ReactNative开源组件

开源组件：底部tab: https://github.com/exponentjs/react-native-tab-navigator 轮播图: https://github.com/sincethere/react-native-banner https://github.com/leecade/react-native-swiper View Page: https://github.co

React Native

同类工具

相关阅读

相关文章

相关问答

相关文档