美文网首页
React Native 之hello world

React Native 之hello world

作者: Bruselee | 来源:发表于2019-05-07 16:25 被阅读0次

    从昨天调研了前端几个时下最流行的框架之后,我发现我对React Native的理念是越来越佩服。

    上层DSL通过transformer 编译成virtucal dom,再将virtual dom映射到原生组件中。所以RN App并不是依托于webview渲染的,它是使用原生组件渲染的,难怪其性能差不多可以媲美原生。

    同时还听说microsoft 准备推出RN for windows,届时,RN不仅跨Android,IOS端,设置可以用来写任何运行windows 10的设备的应用,包括PC,xbox等。

    正好最近想做一个React的个人项目,干脆就尝试先React Native吧。

    遵循古人的先例,学习一门新语言新框架,应该先写个hello world。

    什么是Expo?

    Expo 是一个用来打包React Native项目,生成Android和IOS安装包的工具。它甚至不需要我们拥有Android studio 和XCode ,就可以在云端帮我们生成安装包。Expo 提供对应的SDK来抹平两端的原生Api的差异,使我们前端工程师只需要关注javascript代码就可以。但是Expo SDK并不提供所有原生Api的接口,如果你的App需要某些自定义的原生功能,那么你就必须得扩展React Native。

    Expo 提供了expo eject 命令行来让你的expo project 回退到两个android studio 和 XCode工程。此时,你之前所写的javascript代码依然有用,因为eject生成的这两个工程都回依赖于React Native 和 Expo SDK, 只不过不必须得使用原生的方式,而不是云端来生成二进制文件了。

    参照Expo 官方的指引,我们通过以下步骤就可以快速创建我们的hello world 工程了。

    npm i -g expo-cli
    expo init appproject
    cd appproject
    npm start
    expo build:android
    

    如何在手机端预览

    1. 下载Expo apk到手机上
    2. 确保手机和开发设备在同一局域网
    3. 执行npm start后,用expo软件扫描二维码链接,即可实时查看app 界面,并且响应改变。

    相关文章

      网友评论

          本文标题:React Native 之hello world

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