前端React Nativereact-native

React Native 速成 001 — 项目创建工具CRNA

2017-05-20  本文已影响4954人  时见疏星

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 (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

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

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

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

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

上一篇下一篇

猜你喜欢

热点阅读