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运行,可以看到出现一个硕大的二维码。
![](https://img.haomeiwen.com/i551828/1580261770a36419.png)
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
![](https://img.haomeiwen.com/i551828/b285ab1984945fc4.png)
这是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 这个框架。
网友评论