zoukankan      html  css  js  c++  java
  • react-native window下创建Hello(解决创建一路的坑)

      今天真的颇为激动,1年没有玩RN,竟然被最新的RN版本0.55.4创建Hello折腾了半天,想当年刚玩RN创建环境用了3天,

    想想现在也是不容易啊半天就搞定了,目测以后创建的话也就1-2个小时就搞定了吧,哈哈 ,好了,先说说创建RN需要

    那些工具:

      

    其实不需要装python,先安装node,Git,JDK,都是傻瓜式地安装,jdk需要安装然后在环境变量里添加参数

    (我是翻墙了,所以所以会快很多)

    变量名  :1.JAVA_HOME,变量值:你的java所在路径,如这是我的安装路径:C:Javajdk1.8.0_11

                     2.Path–>双击–>在添加%JAVA_HOME%in;%JAVA_HOME%jrein;

                     3.CLASSPATH 变量值:.;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar 最前面有个点,代表的是当前路径
    然后CMD 运行 java -version 

    下面就是安装 android-stuido  这个就按照,react-native官网的来创建,

    我的项目就是AwesomeProject 也是安装官网的,

    接着 我是在webStrom 配置RN  

     第一步:把项目打开

    第二步:

     第三步:

    第四步:

    第五步:

    然后

     用 which react-native 可以看到你 react-native安装的路径

     第6步 就有这个 run ,当然你没有开启虚拟机 是会报错的,哈哈哈

     第7步:你如果嫌弃没有高亮的语法 看着不舒服会报错,那就是你没有配置react和react-native 

    打开 WebStorm,在Preferences -> Language&FrameWorks -> JavaScript -> Libraries 中点击Download ,找到React和ReactNative下载,

    然后选中新添加的两项执行Apply->OK 。

     

    这样webstrom 里面的RN就配置好了:

    截下来就是配置 

    genymotion 虚拟机了,哈哈这个确实挺坑的,这边就帮你少走弯路了哈哈

    也是傻瓜式的安装 ,去官网需要注册并下载https://www.genymotion.com/,需要注册登录再下载的。注意下载with virtualBox版本,然后安装完成后需要登录,

    就是刚才注册的账号。登录后进入这个页面做两个操作 

    点击那个ADD 然后有各样的虚拟机可以选择,我当然还是喜欢 iphone6 的了哈哈

    然后运行 virtualBox 这个需要把我刚生成的这个文件夹下 

    双击打开然后就可以运行了 virtualBox ,然后双击点击start,就可以了,但是出现了

    这个只要配置这个

      已经勾选好了VT-x/AMD-V项,然后再选择配置把32-bit改成64-bit 

    在运行 start,然后又保存了,哈哈

    这个就需要你配置SDK了,然后 就重新start下

    然后又来了 这个在你的改虚拟机 没有开启 ,需要你在把你的电脑开启F2,bios 设置允许

    推荐一个软件 LeoMoon CPU-V cpu 这个很强

    如果下面2个√ 都是红色的 ,那么就是你的电脑不支持虚拟机,只有换咯,如果 只有最后一个是X

    那么就需要你在开启开启BIOS 里面的VT了 ,

    然后在双击 模拟机的 iphone 6 然后 然后有报错了,我也是醉了

    报错:unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

    查了相关资料说是:初始化运行红屏错误 unable to load script from asset/index.android.bundle

    解决报错的方法:

    第一步:在Android/app/src/main目录下创建一个空的assets文件夹,

    第二步:进入项目根目录执行下面代码

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

     然后 又华丽丽的报错了.......哈哈哈 感觉以前并没有这么错的呀,

    然后找了些方法,哈哈

    注:由于0.49版本以后的react-native没有index.android.js和index.ios.js文件,而统一合并成了index.js,

    所以使用0.49及以后版本的请将第2步中的入口文件改为 index.android.js 改为 index.js,

    第三步:再次执行 react-native run-android

     

    然后在双击 模拟机的 iphone 6 哈哈,这次 等了一会 ,终于出现我想要的页面

    完美 哈哈哈,以为舍不得买MAC,其实MAC下配置环境比window下更简单,真的,没有这么复杂,

    有机会写一篇mac环境的创建吧。哈哈

    所以也只是在window下玩玩RN,毕竟新公司不用RN,

    但是我真的好喜欢RN,下半年就入手一台MAC,毕竟以前也玩过RN,相比VUE,配置环境也可以看出你能有多折腾

    我真的真的是喜欢react,我不知道为什么 ,哈哈哈,好啦,

    最后一句:人生还是需要折腾,不折腾就米不知道有啥惊喜给我们,

    献给一起在大前端 奋斗的孩子,加油!加油!

  • 相关阅读:
    Lock和synchronized的区别和使用(转发)
    redis集群配置
    分布式之redis(转发)
    拉格朗日乘法与KKT条件
    骨骼动画原理
    常用非线性优化算法总结
    广义线性回归模型(三)
    线性模型、最优化方法(二)
    矩阵微分基础(一)
    OpenGL坐标系统
  • 原文地址:https://www.cnblogs.com/yf-html/p/9244612.html
Copyright © 2011-2022 走看看