zoukankan      html  css  js  c++  java
  • 手把手教你React Native 实战之开山篇《一》

    先说一下我为什么学习RN

    18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司。第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队。正好有充足的时间去学习和研究技术!

    公司没有iOS,总监要求后期打算用React Native开发,why? —— no why。是的,是时候去学习React Native 了!

    技术背景

    关于RN的背景,相信大家都知道了。

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。

    RN采用标签式的界面布局,叫css-layout,和CSS基本一样。虽然是第一次使用这种方式布局界面,用熟之后觉得还是很方便的,代码量少,很直接。

    如果你狠熟悉Web前端,恭喜你!只需很少的学习就可以进入移动应用开发领域

    至于自己对于RN的理解

    RN就是在HTML上和native APP 以及在 hybrid APP 、native +web 上进行取长补短,于是演进了混合模式的开发。——React Native

    工欲善其事必先利其器

    环境的搭建

    1、安装jdk

    2、安装SDK
    在翻墙的环境下,可以选项Http://androiddevtools.cn/

    3、安装C++环境

    选择Windows SDK、cygwin活mingw等其他C++环境。变价node.js的C++模块式需要用到

    4.安装node.js与Git

    Node.js是一个基于Chrome v8引擎的JavaScript运行环境。Node.js使用了一个事件驱动,并非阻塞I/O的模型,使其轻量又高效,Node.js的包管理器nmp,是全球最大的开源库生态系统。

    下载链接

    https://git-for-windows.github.io

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

    相关的配置:

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

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

    5.安装React Native 命令行工具

    github下载

    cd到react-native-cli 执行react-native-cli安装命令

    npm install -g react-native-cli

    first-detail --->

    //配置环境变量

    • 1.打开cmd,输入echo

    • 2.第二步输入 echo %PATH%

    • 3.打开git安装目录

    • 找到git-cmd.exe进行配置

    • 陆续配置 第四部和第五步的环境变量
      <----

    6.创建项目

    比如在E盘下创建E:englis_installappProject,

    cd 项目下面 dir

    react-native init MyProject

    7.运行packager
    注意:要进入跟程目录
    react-native start

    可以用浏览器访问:http://localhost:8081/index.android.bundle?platform=android or http://localhost:8081/index.bundle?platform=android

    8.准备模拟器或者 是真机运行Android
    (注意是 真机的话,需要开启USB开发调试)

    react-native run-android or react-native run-ios

    踩坑:

    1,问题:找不到SDK,或者无法正常化 SDK的流经 ,解决办法:配置环境变量

    1. failed to find target with hash String 'android-23' in F://android/android-sdk 姐伯爵办法,你懂的,更新相对应的sdk

    3.build成功之后,显示的手机界面是红色的 。没有链接服务器 js Service

    React Native 的利和弊

    https://blog.csdn.net/gang544043963/article/details/77507940

    如果有什么 问题,欢迎和我交流 微信公众号:终端研发部

    技术
    技术
  • 相关阅读:
    测分用例模板
    功能测试用例设计(24方法)
    pycharm
    Mac-peizhi
    基于Java BufferedImage实现识别图片中的黑色矩形
    Soap从入门到实战
    实列+JVM讲解类的实列化顺序
    基于Springboot的BaseService和BaseController
    Kendo-Grid for Vue API and Template
    web项目jsp中无法引入js问题
  • 原文地址:https://www.cnblogs.com/gooder2-android/p/9022933.html
Copyright © 2011-2022 走看看