React Native 参考官方文档

Tutorial

React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This tutorial is aimed at all audiences, whether you have React experience or not.

Let’s do this thing.

HelloWorld

In accordance with the ancient traditions of our people, we must first build an app that does nothing except say “Hello world”. Here it is:


import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your index.ios.js or index.android.js file to create a real app on your local machine.

What’s going on here?

Some of the things in here might not look like JavaScript to you. Don’t panic. This is the future.

First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn’t used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. import, from, class, extends, and the () => syntax in the example above are all ES2015 features. If you aren’t familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, this page has a good overview of ES2015 features.

The other unusual thing in this code example is Hello world!. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like

or , you use React components. In this case, is a built-in component that just displays some text.

Component and AppRegistry

So this code is defining HelloWorldApp, a new Component, and it’s registering it with the AppRegistry. When you’re building a React Native app, you’ll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that’s required is a render function which returns some JSX to render.

The AppRegistry just tells React Native which component is the root one for the whole application. You won’t be thinking about AppRegistry a lot - there will probably just be one call to AppRegistry.registerComponent in your whole app. It’s included in these examples so you can paste the whole thing into your index.ios.js or index.android.js file and get it running.

React Native 的重点是改变视图代码编写的方式

异步执行

JavaScript 应用代码和原生平台之间所有的操作都是异步执行，并且原生模块也可以使用额外线程。这意味着我们可以解码主线程图像，并将其在后台保存至磁盘，在不阻塞 UI 的情况下进行文本和布局的估量计算，等等。因此，React Native 应用程序的流畅度和响应性都非常好。通信也是完全可序列化的，当运行完整的应用程序时，这允许我们使用 Chrome Developer Tools 来调试 JavaScript，或者在模拟器中，或者在真机上。

触摸处理
iOS 有一个非常强大的系统称为 Responder Chain，可以用来响应复杂视图层级中的事件，但是在 Web 中并没有类似功能的工具。React Native 可实现类似的响应系统并提供高水平的组件，比如 TouchableHighlight，无需额外配置即可与滚动视图和其他元素适度整合。

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>
);
}, });

React 与 React Native

.When you’re building a React Native app, you’ll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that’s required is a render function which returns some JSX to render.

当你创建React Native app的时候，你将会创建一个新的组件。屏幕上的任何东西都可以分类为组件。一个组件可以非常的简单。仅仅要求实现render函数，在render函数里JSX 进行渲染。render函数中含有return函数。组件中必须有的是render函数

The AppRegistry just tells React Native which component is the root one for the whole application. You won’t be thinking about AppRegistry a lot - there will probably just be one call to AppRegistry.registerComponent in your whole app. It’s included in these examples so you can paste the whole thing into your index.ios.js or index.android.js file and get it running.

AppRegistry的作用是告诉 React Native 对于整个应用来说，那个是根组件

Most components can be customized when they are created, with different parameters. These creation parameters are called props.

props

大多数组件在被创建的时候是可以通过不同的参数被自定义的。这些被创建的参数被称为props 属性

For example, one basic React Native component is the Image. When you create an image, you can use a prop named source to control what image it shows.

例如，一个基础的React Native 组件 Image，当你创建一个图片时，你可以使用它的 source属性来控制它显示什么图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
Notice that {pic} is surrounded by braces, to embed the variable pic into JSX. You can put any JavaScript expression inside braces in JSX.

注意 {pic} 是被大括号包围的，目的是在JSX中能够使用。在JSX中你可以把任何的JavaScript 表达式放在括号里面

Your own components can also use props. This lets you make a single component that is used in many different places in your app, with slightly different properties in each place. Just refer to this.props in your render function. Here’s an example:

你自定义的组件同样可以使用属性props，

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

Using name as a prop lets us customize the Greeting component, so we can reuse that component for each of our greetings. This example also uses the Greeting component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.

使用name 最为一个属性使我们能够自定义Greeting 组件，因此我们可以复用此组件于我们的greetings。这个例子也说明在JSX中使用Greeting组件的方法，想创建组件一样。这个功能是React看起来是非常的酷的。如果你发现自己希望有一个不一样的UI来工作，你仅仅需要定制一个就行了

State

There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.

控制或管理一个组件的有两种数据类型：props（属性）和 state（状态）
props 是被父组件设置且通过一个组件的生命周期来修改的。
对于将要改变的数据，我们必须使用state

In general, you should initialize state in the constructor, and then call setState when you want to change it.

通常，你应该在constructor 方法中（生命周期方法）初始化state（initialize state），调用setState方法来改变它。

For example, let’s say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a prop. The “whether the text is currently on or off” changes over time, so that should be kept in state.

举例，比如说我们想要是文字一直闪烁。在闪烁组件被创建的时候文字标签本身仅仅被设置一次，因此文字本身是一个prop（属性），当前文字的的开关的改变，应该是保存在state上的。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

In a real application, you probably won’t be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like Redux to control your data flow. In that case you would use Redux to modify your state rather than calling setState directly.

在一个真正的应用当中，你也许不会设置一个定时器的state，你可能在请求服务端到新数据或者用户输入的时候设置state。你也可以这样想使用Reduce来控制你的数据流使用state。如果那样的话，你将会使用Redux来改变你的state 而不是直接调用setSate

State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API.

At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to learn about Style.

style

With React Native, you don’t use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

对于ReactNative，你无需使用特别的语言和语法来定义styles（样式），你只需要使用JavaScript语言来进行设计style（样式）。所有的核心组件有一个叫做style的属性。
样式的命名和赋值通常和在web上的CSS的怎样工作是相匹配的。除了命名是用驼峰的写法之外，e.g backgroudColor 而不是 background-color

The style prop can be a plain old JavaScript object. That’s the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

style 属性可以是普通的JavaScript对象.这是最简单的也是我们通常使用的代码例子。
您还可以传递样式数组，数组中的最后一个样式具有优先级，因此，您可以使用此继承样式。

As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here’s an example:

随着组件越来越复杂，通常会使用SryleSheet来是它看起来清洁。创建一个用来在同一个地方定义多个样式。这里有个例子

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue <Text>hel</Text></Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

One common pattern is to make your component accept a style prop which in turn is used to style subcomponents. You can use this to make styles “cascade” the way they do in CSS.

一个常见的模式是你的组件style属性同样适用于它的子组件，你可以使用这个样式来“级联”他们在CSS中做的方式。

There are a lot more ways to customize text style. Check out the Text component reference for a complete list.

Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.

Height and Width

A component’s height and width determine its size on the screen.
一个组件的height和width 决定了它在屏幕上的尺寸

Fixed Dimensions

The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

给组件的style添加width和height是设置组件尺寸最简单的方式。所有在React Native中的尺寸都是无单位的。代表（密度无关的）像素。

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.

这种设置组件尺寸的方式是最常见的方式，应始终呈现在完全相同的大小，无论屏幕尺寸

Flex Dimensions

Use flex in a component’s style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

在组件的样式中使用Flex以基于可用的空间动态地扩展和收缩组件。通常，你将使用Flex：1，它告诉一个组件来填充所有可用的空间，在同一个父组中的每个组件中均匀共享。给定的Flex越大，一个组件的空间比例就越高。

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

Layout with Flexbox

A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.

Handling Text Input

TextInput is a basic component that allows the user to enter text. It has an onChangeText prop that takes a function to be called every time the text changed, and an onSubmitEditing prop that takes a function to be called when the text is submitted.

For example, let’s say that as the user types, you’re translating their words into a different language. In this new language, every single word is written the same way: 🍕. So the sentence “Hello there Bob” would be translated as “🍕🍕🍕”.

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class PizzaTranslator extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
}
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);

In this example, we store text in the state, because it changes over time.

There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the React docs on controlled components, or the reference docs for TextInput.

Text input is probably the simplest example of a component whose state naturally changes over time. Next, let’s look at another type of component like this one that controls layout, and learn about the ScrollView.

ScrollView

The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the horizontal property).

ScrollView是一个通用的滚动容器可以承载多个组件和视图,滚动项目不需要均匀的，你可以同时在垂直和水平滚动（通过设置横向性能）。

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, Text } from 'react-native'
class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return (
<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>If you like</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>Scrolling down</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>What's the best</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>Framework around?</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:80}}>React Native</Text>
</ScrollView>
);
}
}
AppRegistry.registerComponent(
'IScrolledDownAndWhatHappenedNextShockedMe',
() => IScrolledDownAndWhatHappenedNextShockedMe);

ListView

The ListView component displays a scrolling list of changing, but similarly structured, data.

ListView 组件展示一个不断改变的滚动数据，类似于结构体数据

ListView works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the ListView only renders elements that are currently showing on the screen, not all the elements at once.

ListView 可以适用于非常大的数组数据。它的数组的单元可能会随着时间改变，不像ScollView一样数据是固定的。ListView只呈现正在屏幕上显示的元素，并不是一次展示所有的元素。

The ListView component requires two props: dataSource and renderRow. dataSource is the source of information for the list. renderRow takes one item from the source and returns a formatted component to render.
ListView 组件需要实现两个属性方法： dataSource 和 renderRow。
dataSource 是列表信息的数据源。renderRow 从source里获取一条数据来进行渲染展示的组件。

This example creates a simple ListView of hardcoded data. It first initializes the dataSource that will be used to populate the ListView. Each item in the dataSource is then rendered as a Text component. Finally it renders the ListView and all Text components.
此示例创建一个简单的固定数据的列表。首先初始化数据源将被用来填充列表。在每个项目的数据源然后呈现为一个文本组件。最后，它渲染ListView和所有文本组件。

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// Initialize the hardcoded data
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

One of the most common uses for a ListView is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.

ListView 的最常用于展示从服务器端请求的数据。因此，你将需要学习关于RN当中网络的知识

NetWorking

Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server.

很多移动应用需要从远程URL下载资源，你可能会想到用postqu请求Rest API，或者您只需要从另一台服务器获取静态内容的一大块。

Using Fetch

React Native provides the Fetch API for your networking needs. Fetch will seem familiar if you have used XMLHttpRequest or other networking APIs before. You may refer to MDN’s guide on Using Fetch for additional information.

Making requests

In order to fetch content from an arbitrary URL, just pass the URL to fetch:

1	fetch('https://mywebsite.com/mydata.json')

Fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, or make a POST request:

fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})

Take a look at the Fetch Request docs for a full list of properties.

Handling the response

The above examples show how you can make a request. In many cases, you will want to do something with the response.

Networking is an inherently asynchronous operation. Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner:

function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
}

You can also use the proposed ES2017 async/await syntax in a React Native app:

async function getMoviesFromApi() {
try {
let response = await fetch('https://facebook.github.io/react-native/movies.json');
let responseJson = await response.json();
return responseJson.movies;
} catch(error) {
console.error(error);
}
}

Don’t forget to catch any errors that may be thrown by fetch, otherwise they will be dropped silently.

By default, iOS will block any request that’s not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple’s App Store review will require reasonable justification for disabling ATS. See Apple’s documentation for more information.

Using Other Networking Libraries

The XMLHttpRequest API is built in to React Native. This means that you can use third party libraries such as frisbee or axios that depend on it, or you can use the XMLHttpRequest API directly if you prefer.

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

The security model for XMLHttpRequest is different than on web as there is no concept of CORS in native apps.

WebSocket Support

React Native also supportsWebSockets , a protocol which provides full-duplex communication channels over a single TCP connection.

var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// connection opened
ws.send('something'); // send a message
};
ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};

Your app can now display all sorts of data and you may soon need to organize this content into several screens. To manage the transition between these screens, you will need to learn about navigators.

More Resources

If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn’t just a product made by one company - it’s a community of thousands of developers. So if you’re interested in React Native, here’s some related stuff you might want to check out.

Popular Libraries

If you’re using React Native, you probably already know about React. So I feel a bit silly mentioning this. But if you haven’t, check out React - it’s the best way to build a modern website.

One common question is how to handle the “state” of your React Native application. The most popular library for this is Redux. Don’t be afraid of how often Redux uses the word “reducer” - it’s a pretty simple library, and there’s also a nice series of videos explaining it.

If you’re looking for a library that does a specific thing, check out Awesome React Native, a curated list of components that also has demos, articles, and other stuff.

Example Apps

There are a lot of example apps at the React Native Playground. You can see the code running on a real device, which is a neat feature.

The folks who built the app for Facebook’s F8 conference in 2016 also open-sourced the code and wrote up a detailed series of tutorials. This is useful if you want a more in-depth example that’s more realistic than most sample apps out there.

Development Tools

Nuclide is the IDE that Facebook uses internally for React Native development. The killer feature of Nuclide is its debugging ability. It also has great inline Flow support.

Ignite is a starter kit that uses Redux and a few different common UI libraries. It has a CLI to generate apps, components, and containers. If you like all of the individual tech choices, Ignite could be perfect for you.

CodePush is a service from Microsoft that makes it easy to deploy live updates to your React Native app. If you don’t like going through the app store process to deploy little tweaks, and you also don’t like setting up your own backend, give CodePush a try.

Exponent is a development environment plus application that focuses on letting you build React Native apps in the Exponent development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Exponent.

Deco is an all-in-one development environment specifically designed for React Native. It can automatically set up a new project, search for open source components, and insert them. You can also tweak your app graphically in real time. Check it out if you use macOS.

Where React Native People Hang Out

The React Native Community Facebook group has thousands of developers, and it’s pretty active. Come there to show off your project, or ask how other people solved similar problems.

Reactiflux is a Discord chat where a lot of React-related discussion happens, including React Native. Discord is just like Slack except it works better for open source projects with a zillion contributors. Check out the #react-native channel.

The React Twitter account covers both React and React Native. Follow the React Native Twitter account and blog to find out what’s happening in the world of React Native.

There are a lot of React Native Meetups that happen around the world. Often there is React Native content in React meetups as well.

Sometimes we have React conferences. We posted the videos from React.js Conf 2016, and we’ll probably have more conferences in the future, too. Stay tuned.