React Native 速成 001 — 项目创建工具CRNA和预览神器Expo

create-react-native-app，简称CRNA，用来快速创建react native的app。项目地址如下：
https://github.com/react-community/create-react-native-app

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

npm start命令能让你的 RN app 运行在开发模式中。你可以在你的 ios 或 android 手机中下载 expo 的 app，然后在 expo 中可以通过局域网实时查看 RN 应用！这中方法比模拟器方便许多，而且不需要连接电脑哟。你的团队成员都可以实时预览，非常方便。

expo的相关工具和预览app在这里
https://expo.io/

这里我们先不用XDE开发，原因是XDE很多强大的功能因为墙的原因很难用。
但是CRNA和Expo的Mobile Preview却是能用的。

安卓版：https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www
苹果版：https://itunes.apple.com/app/apple-store/id982107779?pt=17102800&ct=www&mt=8

我们进入CRNA创建的项目，npm start运行，可以看到出现一个硕大的二维码。

Or enter this address in the Expo app's search bar:

  exp://192.168.1.100:19000

Your phone will need to be on the same local network as this computer.

For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

在expo中扫码即可加载运行，加载后会出现

11:26:57 AM: Finished building JavaScript bundle in 2344ms
11:26:58 AM: Running app on Asky iPhone

这是App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      
        Open up App.js to start working on your app!
        Changes you make will automatically reload.
        Shake your phone to open the developer menu.
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我们修改里面的字，实时保存，会看到Expo里的预览也会随之变化，非常方便。

可以通过摇晃手机唤出Expo的菜单，回到Expo主页，否则是无法退出预览app的。

下一课会讲解如何使用 React Native Elements 这个框架。