移动开发

从Android到React Native(入门采坑一)

2018-11-28  本文已影响291人  向日葵lll

1.搭建环境

     安装Python

     从官网(https://www.python.org/downloads/release/python-2710/)下载并安装python 2.7.x(3.x版本不行)

     安装node.js

     从官网(https://nodejs.org/en/)下载node.js的官方5.x版本或更高版本。

     建议设置npm镜像以加速后面的过程(或使用科学上网工具)。

     npm config set registry https://registry.npm.taobao.org --global

     npm config set disturl https://npm.taobao.org/dist --global

     遇到的问题:note 8.12.0 安装 编译失败,不知道为啥,  安装note 11.0.0 成功

2.创建项目

    d:react-native init reactNativeProject

    运行编译到手机

    项目根目录执行:react-native run-android

    apk就成功安装啦~

3. 我下载了别人的开源项目,怎么在我的电脑上运行呢?

    答:terminal切换到这个目录后

    第一步【npm install】

    第二步【react-native link】

    第三步【 react-native run-android】

其中第二步并不是必须的,有一些npm_module用到了native功能时就需要先进行一下link才可以编译运行。比如:react-native-vector-icons,react-native-video等

4.解决-React-Native: Android project not found. Maybe run react-native android first?

    打开终端,进入到项目的根目录

    执行命令 react-native upgrade

    根据提示一直输入y,回车。

    重新输入命令react-native run-android

5.webstorm 打开,正确的有黄色提示

    解决方法:不赞成关掉提示。虽然没有黄色警告,但是追踪功能肯定也是不能用了

    可以下载types

    npm install @types/react-native --save-dev

6.解决第一次新建项目,编译成功,app js爆红

    按照步骤:

    进入项目的android\app\src\main 新建assets文件夹

    然后键入如下命令(在项目根目录下输入)

    react-native bundle --platform android --dev false --entry-file index.js --bundle-output     android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

7.解决摇一摇 reload 全红

    配置ip 电脑ip:8081

    写了第一句helloworld~

8.将现有android 项目 变成RN项目

    https://blog.csdn.net/xueshanhaizi/article/details/52873626

    注:已经按照这个链接做好

    出入的地方:新建js 文件应该是,index.js  而不是 index,android.js

    相关代码加好了。输入命令

    1:react-native upgrade

    2.react-native run-android

    如果不执行1命令,直接执行2命令,会提示Android project not found. Maybe run react-native android first?


学习文献

https://github.com/vczero/react-native-lesson 入門指南

https://www.cnblogs.com/yexiaochai/p/6042112.html

https://www.jianshu.com/p/fa0874be0827?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weixin-friends

https://www.jianshu.com/p/276cb2c0283a   來源:简书

https://blog.csdn.net/applek_case/article/details/80183938

上一篇下一篇

猜你喜欢

热点阅读