新React Native100中文教程网！

使用 JavaScript 建立原生应用官网网址http://www.reactnative100.com/

React Native 让你可以使用 JavaScript 来构建移动应用程序. React Native 和 React 使用了相同的设计, 让你可以 自定义组件并使用组件来组成一个丰富的移动用户界面.

import React, { Component } from 'react';import { Text, View } from 'react-native';class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> 如果你在 web 端喜欢 React, 那么你也将会喜欢 React Native. </Text> <Text> 你只需要使用组件 'View' 和 'Text', 来代替 web 端的 'div' 和 'span'. </Text> </View> ); }}

一个 React Native 的应用程序是一个真正的移动应用

使用React Native , 你不需要创建一个"移动WEB应用" , "HTML5应用" 或者 "混合应用" . React Native创建的移动应用程序和使用Objective-C或java创建的程序没有任何区别. React Native使用相同的基础UI,向积木拼装似的来设计iOS和Android应用 .

import React, { Component } from 'react';import { Image, ScrollView, Text } from 'react-native';class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} /> <Text> 在 iOS端, 滚动视图 , 使用的是原生的 UIScrollView. 在 Android端, 滚动视图 , 使用的是原生的 ScrollView. 在 iOS端, 图片 , 使用的是原生的 UIImageView. 在 Android端, 图片 , 使用的是原生的 ImageView. React Native 包装了基本的原生组件 , 创建的应用可以达到原生应用的性能. </Text> </ScrollView> ); }}

不再需要重新编译

React Native 使我们不需要重新编译 , 我们可以立刻重新加载我们的程序 , 这样我们的应用程序会更快 . 热加载 , 你甚至可以动态的加载新的程序 . 我们来看一个例子.

当你需要时使用原生代码

React Native 结合了使用Objective-C ,java 或者 Swift 编写的组件。如果需要优化程序 , 就很简单了. 你也可以直接使用原生代码结合React Native , 这就是 Facebook 应用的设计原理 .

import React, { Component } from 'react';import { Text, View } from 'react-native';import { TheGreatestComponentInTheWorld } from './your-native-code';class SomethingFast extends Component { render() { return ( <View> <TheGreatestComponentInTheWorld /> <Text> TheGreatestComponentInTheWorld 可以使用本地的Objective-C ,java 或 Swift . 产品开发过程是相同的. </Text> </View> ); }}

开始使用 React Native http://www.reactnative100.com/