美文网首页前端React Nativereact-native
React Native 速成 001 — 项目创建工具CRNA

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

作者: 时见疏星 | 来源:发表于2017-05-20 11:34 被阅读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 这个框架。

    相关文章

      网友评论

      本文标题:React Native 速成 001 — 项目创建工具CRNA

      本文链接:https://www.haomeiwen.com/subject/wwzuxxtx.html