rn开发_rn开发还是原生开发多 - CSDN
  • android RN开发环境搭建

    2019-01-25 11:47:46
    首先讲讲什么是React Native开发(RN开发)? React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大...

    今天,简单讲讲Android React Native开发环境搭建。

     

    首先讲讲什么是React Native开发(RN开发)?

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

     

    一句话总结,就是使用RN开发可以一套代码,编译出Android和IOS两个平台的app.

    环境搭建:

    我参考的网站:https://reactnative.cn/docs/getting-started.html

    安装依赖

    必须安装的依赖有:Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

    虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

    Node, Python2, JDK

    我们建议直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK)

    注意 Node 的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像以加速后面的过程(或使用科学上网工具)。

    下载完成上面的软件后,dos下运行:

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

    Yarn、React Native 的命令行工具(react-native-cli)

    Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

    npm install -g yarn react-native-cli
    

    安装完 yarn 后同理也要设置镜像源:

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

    安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

     

    Android 开发环境

    如果你之前没有接触过 Android 的开发环境,那么请做好心理准备,这一过程相当繁琐。请万分仔细地阅读下面的说明,严格对照文档进行配置操作。

    这个我之前就写过android studio开发环境的搭建:https://blog.csdn.net/bzlj2912009596/article/details/81534702,具体参考就可以了。

    3. 安装完成Android studio后,需要配置 ANDROID_HOME 环境变量

    React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

    打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

    ANDROID_HOME Environment Variable

    SDK 默认是安装在下面的目录:

    c:\Users\你的用户名\AppData\Local\Android\Sdk
    

    你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK

    你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

     

    创建新项目

    使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:

    react-native init AwesomeProject
    

    提示:你可以使用--version参数(注意是个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

    Windows 用户请注意,请不要在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行!

    如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用

     

    准备 Android 设备

    你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器。后面我们所有的文档除非特别说明,并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device(简称 AVD)的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整,但性能较差。第三方模拟器性能较好,但可能需要付费,或带有广告。

    使用 Android 真机

    你也可以使用 Android 真机来代替模拟器进行开发,只需用 usb 数据线连接到电脑,然后遵照在设备上运行这篇文档的说明操作即可。

    使用 Android 模拟器

    你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,我是使用Android studstudio创建的模拟器来运行RN程序的。很简单。

    编译并运行 React Native 应用

    确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行react-native run-android

    cd AwesomeProject
    react-native run-android
    

    如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的翻墙工具,否则将频繁遭遇链接超时和断开,导致无法运行。

    如果你的设备的 Android 版本低于 5.0,则可能在运行时看到红屏,请阅读在设备上运行这篇文档来按照步骤解决。

    AwesomeProject on Android

     

    这里可能存在无法运行的问题,需要在dos命令窗口里输入npm start   (先启动npm,再才可以在设备上运行环境),然后再打卡另一个dos窗口去运行RN程序。

     

    android RN开发环境搭建就讲完了。

     

    就这么简单。

     

     

    展开全文
  • RN开发环境搭建-window

    2019-07-04 11:13:11
    RN开发环境搭建-window 参考博客 react native 中文网 搭建开发环境 React Native入门系列:如何搭建RN环境(Windows篇) 环境清单 1、nodejs 2、React Native Command Line Tools 3、Python2 4、Java ...

    RN开发环境搭建-window

    参考博客
    react native 中文网 搭建开发环境
    什么博文都没有官网给得文档详细和全面喽,建议初次搭建RN环境的时候先去官网开心地看一遍文档。

    React Native入门系列:如何搭建RN环境(Windows篇)
    再看看别人的博客,汲取下他人的学习经验(介都是随便百度到的一篇,看过便记录一下 )

    最后就是自个开心地开始装软件,掉坑里,爬出来,再掉坑里的实践记录喽~~

    环境清单

    1、nodejs
    2、React Native Command Line Tools
    3、Python2
    4、Java SE Development Kit (JDK)
    5、Android Studio安装和环境配置

    Python2 安装

    参考 博客 windows下安装python 要看一下这东东,去配置环境变量

    博文里说
    “将下面这行内容添加到Path变量的开始位置:
    C:\Python27;C:\Python27\Scripts; ”
    意思就是把python2的安装路径和 Scripts 路径加到环境变量中 完事

    听官网文档的话, 去下载Python2 下载页面
    在这里插入图片描述
    配置环境变量

    我自己建了文件夹 Environment,看自己喜欢喽,想安装在哪里就安装在哪里
    在这里插入图片描述

    测试一下是否安装成功,注意是大写的 V ,(一般不都是小写v的嘛)
    在这里插入图片描述

    Java SE Development Kit (JDK)

    Java SE安装参考经验 要看一下这东东,去配置环境变量
    听官网文档的话, JDK 的版本必须是 1.8 下载页面
    (谁能告诉我为什么 8u201 就是 1.8版本 ㄟ( ▔, ▔ )ㄏ,我满网页找,找了好久的1.8都没找到)
    在这里插入图片描述
    配置环境变量,把java安装路径下的 lib 、lib\ tools.jar 、bin 、jre\bin 添加到环境变量中
    在这里插入图片描述
    测试一下是否安装成功
    在这里插入图片描述

    Android Studio安装和环境配置

    https://reactnative.cn/docs/getting-started.html#1-安装-android-studio
    这个直接看react native 中文网的 Android 开发环境 安装流程就够了,写得十分详细
    (SDK默认路径:C:\Users\用户名\AppData\Local\Android\sdk)
    第一次按照官方文档的步骤翻墙一步一步安装,在装模拟器的时候失败了三次以上。整个过程差不多花了半天的时间吧,还算比较顺利,下载了大概3个G左右的资源。

    然后第一台电脑安装成功后,我机智地去 备份了安装包和 下载 的 sdk 东东。然后开始第二台电脑的安装~
    在这里记录第二次安装的过程

    step1 : 单击安装包进行安装
    在这里插入图片描述
    step2: 直接点 X 关闭不能访问 android sdk add-on list
    在这里插入图片描述
    step3: 去C:\Users\用户名\AppData\Local路径下新建 Android 文件夹,打开Android文件夹后新建 sdk 文件夹,对喽…就是在手动制造SDK默认路径(SDK默认路径:C:\Users\用户名\AppData\Local\Android\sdk)
    把在第一台电脑上sdk默认路径中下载好的东东全部拷贝过来!!
    在这里插入图片描述
    step4:然后好像可以了,点Finish
    在这里插入图片描述
    step5: 安装完之后,查看设置,该勾上的都是勾好的,说明拷贝过去的sdk管用~
    在这里插入图片描述
    补充:这里也要配置一下环境变量,去android 的 SDK默认路径下打开platform-tools 的路径复制下来,把platform-tools 添加到环境变量中,这样就可以全局cmd 使用 平台工具里的 adb 。

    C:\Users\用户名\AppData\Local\Android\sdk\platform-tools
    

    step6:通过这种方式安装好后,打开模拟器调试项目居然报错~~~~
    在这里插入图片描述
    好吧,百度一番后,说是要手动去安装一下截图中路径中的这个intelhaxm-android.exe,(疑问:系不系之前连外网在线安装sdk的时候,自动安装了这个?)
    在这里插入图片描述
    差不多这样,第二次安装所花时间不超过1个小时,开心!

    React Native Command Line Tools

    cnpm i -g react-native-cli
    // 官网文档的执行命令是  npm install -g yarn react-native-cli 
    //  我这不平时都用cnpm安装依赖,于是乎我  没有选择安装 yarn  
     // 不信邪你就像我这么干,后面一准安装依赖这样失败,那样失败( ̄_, ̄ )
    

    创建项目

    react-native init ProjectName
    

    没安装 yarn 结果初始化项目的时候卡住了,
    提示‘Consider installing yarn to make this faster: https://yarnpkg.com’ .
    所以… 再试试连外网然后初始化项目…, 貌似还是卡住,依赖装不完,( ̄_, ̄ )
    难不成 react-native-cli 里指定了依赖安装工具是 yarn ?
    (安装完yarn后初始化项目很顺利,所以不要抗拒,乖乖听官方文档的话,把yarn安装上!!!!)

    安装yarn

    cnpm i -g yarn 
    

    配置淘宝镜像

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

    创建项目

    react-native init ProjectName
    

    rn项目初始化成功
    n项目初始化成功

    跑起来

    react-native run-android
    

    模拟器下异常报错记录

    1、 Task :app:installDebug FAILED

    解决: 自己试了下,去模拟器里把之前安装的 测试应用给卸载掉,居然管用了 ,哇哈哈

    RN调试

    百度相关博客时,看别人说reload,然而在模拟器的界面到处找reload都木有找到。Ctrl + M 快捷键…

    React Native调试技巧与心得
    可以通过 Ctrl + M 快捷键来快速打开Developer Menu , Reload按钮就在这个菜单里 !
    双击 键盘上 的 R键,也可以让模拟重新加载应用

    展开全文
  • RN 开发流程简述

    2019-12-01 21:54:28
    RN简介1. RN背景及由来 一. RN简介 1. RN背景及由来 早期开发一款Android, IOS App 需要Android, ios 两个团队。同时两个平台/终端需要两套代码,复用率及成本比较高。传统方式开发的Android, ios 无法实现动态...

    一. RN简介

    1. RN背景及由来

    早期开发一款Android, IOS App 需要Android, ios 两个团队。同时两个平台/终端需要两套代码,复用率及成本比较高。传统方式开发的Android, ios 无法实现动态更新, 每次更新都需要响应APP应用市场上传,过程复杂还需要等待app审核。如果审核还没通过,新的版本需求来了就造成了非常尴尬的场景。

    RN特点跨平台(android, ios), 低投入高回报(一次学习可以同时开发android,ios应用),代码复用率高(两个平台代码基本一致,通用一套) 性能高(并发允许在webkit浏览器引擎,而是自己的渲染引擎,性能比webview + h5性能高很多), 支持动态更新(code push 或服务器等动态更新)。

    二. RN开发环境介绍

    1. Window环境介绍

    在这里插入图片描述

    • node 环境安装
    • react-native 安装
      npm install -g react-native-cli
    • androidStudio 用于开发android的开发工具
      通过google提供的中文域名: https://developer.android.google.cn/index.html 下载安装

    至此环境准备已完成。

    初始化及使用

    (1) eact-native init FirsApp 来初始化一个RN自定义名为FirsApp的项目
    在这里插入图片描述
    (2) 运行一个rn/android 项目 (首先要确定已运行了一个模拟器/或者有一个连接到电脑的android设备)
    - 通过命令启动RN中的android项目
    run react-native run android (运行rn中的android项目)
    运行后会编译并安装到模拟器
    - 通过androidStudio 启动RN中的android项目
    在这里插入图片描述

    二. RN项目调试

    1. 调试方式Developer Menu

    !](https://img-blog.csdnimg.cn/20191201133522124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW56aGl6aHVv,size_16,color_FFFFFF,t_70)

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    三. React/ES6-9基础

    1. React 基础

    (1) React 生命周期
    (2) React: Props, State(组件自身私有状态), setState(更新组件自身状态), ref;

    基础知识不再补充,自行参考官网

    2. ES6-9 基础

    基础知识不再补充, 自行参考官网

    三. React-Native 布局

    1. 基础知识点

    React Native 中的布局方式FlexBox. 即: 在React Native 中布局采用的是FlexBox(弹性框)进行布局。
    FlexBox 提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox是CSS3弹性框布局规范,并不是所有浏览器都支持FlexBox。 但在做React Native开发时大可不必担心FlexBox的兼容性问题, 因为React Native 选择用FlexBox布局,那么React Native 对其的支持自然会做的很好。

    像素无关

    在React Native中尺寸是没有单位的, 它代表了设备独立像素。

    <View style={{width: 100, height: 100, margin: 40}}>
         <Text style={{fontSize:16, margin: 20}}>尺寸</Text>
    </View>
    

    上述代码, 运行在Android上时, View的长和宽被解释成: 100dp 100dp单位是 dp, 字体被解释成16sp 单位是

    React Nativ 中的FlexBox 和 Web CSS上FlexBox的不同之处

    - flexDirection: React Native 中默认为: ==flexDirection: 'column'==, z
    其余相关CSS3 flex 向支持,自行参考官网。

    展开全文
  • iOS原生混合RN开发详解 做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid,在早期的时候,可能部分同学也...

    iOS原生混合RN开发详解

    做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid,在早期的时候,可能部分同学也接触过PhoneGap等hybrid技术,今天我们就简单来聊下一种比较新的Hybrid技术方案,原生App与ReactNativie Hybrid,如果有同学们对React Native技术不熟悉的同学,可以查看作者简书中对React Native基础的讲解:React Native入门到实战讲解

    示例Demo地址

    image

    具体步骤

    • 创建一个iOS原生项目
    • 将iOS原生项目支持pod
    • 调整目前项目工程的文件夹结构
    • 添加RN依赖相关文件
    • 安装React Native
    • 修改Podfile文件,原生安装React Native依赖库
    • 在iOS原生页面填加RN页面入口
    • 修改RN入口文件 index.ios.js
    • 执行npm start 运行项目

    创建一个iOS原生项目

    使用Xcode创建一个空的项目,这个应该不用多说了

    image

    项目支持pod

    这一操作步骤同样也很简单,我们只需要执行下面的几条命令即可,如果对cocoapods 安装使用不熟悉的同学请参照作者简书

    • 创建podfile文件,我们在有xcodeproj文件的同级目录下执行下面命令,这时我们的项目文件中就多了一个Podfile文件
    $ pod init
    • 执行pod install 命令来安装pod,同样,这个命令也是在有xcodeproj同级目录下,安装完成后,我们的项目多了一个
    $ pod install

    image

    image

    注意: 这里对原生iOS不熟悉的同学们需要注意了,当我们使用pod来作为库管理工具,后面我们打开项目运行,我们就需要打开上图所示的xcworkspace文件了

    调整目前项目工程的文件夹结构

    这里对文件夹做结构调整是为了后期更好的将Android原始项目也使用RN Hybrid,使iOS和Android共享一份React Native框架,共享同一份JS文件,调整的后的文件夹结构如下

    image

    添加RN依赖相关文件

    到这里,我们原生的iOS项目目录结构已近调整完毕,后面我们需要处理的都是RN相关的内容了,这里需要创建的文件有点多,大家可以直接将示例Demo中的这几个文件直接拖到自己的项目中,然后在做修改即可

    • 首先我们需要创建package.json文件
    • 创建index.ios.js文件
    • 创建index.android.js文件
    • 创建bundle文件夹,注意这个文件夹是后面我们接入CodePush热更新时使用的

    安装React Native

    安装React Native这个也很简单,我们也是简单的执行下面的命令即可,注意:执行npm 系列的命令,我们都需要在项目根目录(有package.json文件的目录)下执行

    $ npm install

    package.json文件内容如下

    {
      "name": "iOSHybridRNDemo",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start"
      },
      "dependencies": {
        "prop-types": "^15.6.1",
        "react": "16.0.0",
        "react-native": "0.50.3",
        "react-native-code-push": "^5.2.2",
        "react-native-root-toast": "^1.3.0",
        "react-native-router-flux": "^4.0.0-beta.24",
        "react-native-simple-store": "^1.3.0",
        "react-native-storage": "^0.2.2",
        "react-native-vector-icons": "^4.3.0",
        "react-redux": "^5.0.6",
        "redux": "^3.7.2",
        "redux-actions": "^2.2.1",
        "redux-promise-middleware": "^4.4.1",
        "redux-thunk": "^2.2.0"
      },
      "devDependencies": {
        "babel-jest": "22.4.1",
        "babel-preset-react-native": "4.0.0",
        "jest": "22.4.2",
        "react-test-renderer": "16.0.0"
      },
      "jest": {
        "preset": "react-native"
      }
    }
    

    注意:因为我们项目中使用到了react-native-vector-icons 这个iconFont组件需要依赖原生,所以我们执行完 npm install 之后,我们还需要 再执行一个 react-native link react-native-vector-icons 命令来安装原生依赖

    $ react-native link react-native-vector-icons

    image

    当我们执行完npm install 命令之后,我们再打开项目目录,发现多了一个 node_modules 文件夹,这个文件夹就是我们安装的React Native所有的依赖库

    修改Podfile文件,原生安装React Native依赖库

    后面我们都是使用Pod来管理原生的依赖库,安装React Native依赖库,我们只需要将下面的Podfile文件中的内容添加进去,执行 pod install 安装即可

    Podfile文件

    # Uncomment the next line to define a global platform for your project
      platform :ios, '9.0'
    # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
    # use_frameworks!
    
    target 'iOSHybridRNDemo' do
    
      # Pods for iOSHybridRNDemo
    
        #***********************************************************************#
    
        # 'node_modules'目录一般位于根目录中
        # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
        pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'Core',
        'RCTText',
        'RCTImage',
        'RCTActionSheet',
        'RCTGeolocation',
        'RCTNetwork',
        'RCTSettings',
        'RCTVibration',
        'BatchedBridge',
        'RCTWebSocket',
        'ART',
        'RCTAnimation',
        'RCTBlob',
        'RCTCameraRoll',
        'RCTPushNotification',
        'RCTLinkingIOS',
        'DevSupport'
        # 在这里继续添加你所需要的模块
        ]
    
        # 如果你的RN版本 >= 0.42.0,请加入下面这行
        pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
    
        #***********************************************************************#
    
        pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
    
    end
    

    注意: #*************************# 中间的内容是我们需要添加的RN依赖库,后面我们所有pod 相关的命令,我们都需要iOS根目录(有Podfile文件的目录)下执行

    • 执行安装命令
    $ pod install

    image

    在iOS原生页面填加RN页面入口

    现在我就来实现从原生页面跳RN页面

    • 使用RN提供一个View视图代码如下
    NSURL * jsCodeLocation;
    #ifdef DEBUG
        NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
        jsCodeLocation = [NSURL URLWithString:strUrl];
    #else
        jsCodeLocation = [CodePush bundleURL];
    #endif
    
        NSDictionary *params = @{@"componentName":@"MeApp1", @"args":@{@"params":@"这是原生传递的参数"}};
    
        RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                             moduleName:@"iOSRN"
                                                      initialProperties:params
                                                          launchOptions:nil];
        self.view = rootView;

    修改RN入口文件 index.ios.js

    修改RN页面的入口文件,这里当是iOS入口我们修改index.ios.js文件,当Android入口,我们修改index.android.js文件

    • index.ios.js文件
    import React, {Component} from 'react'
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      AppRegistry
    } from 'react-native';
    
    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menu',
      android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });
    
    type Props = {};
    export default class App extends Component<Props> {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit App.js
            </Text>
            <Text style={styles.instructions}>
              {instructions}
            </Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    AppRegistry.registerComponent('iOSHybridRNDemo', () => App)

    执行npm start 运行项目

    到这里,我们一个简单的原生嵌入RN开发工程就搭建完成了,我们执行下面命令来运行项目,查看效果

    • 开启node 服务
    $ npm start
    • 运行效果

    image

    福利时间

    • 作者React Native开源项目OneM地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
    • 作者简书主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注多多点赞
    • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
    • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(*620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!*
    展开全文
  • 学习RN开发的人大多是从其他领域延伸而来,因为RN目前可以跨越android、ios和web,那么学习RN的群体中主要就包括android开发者、ios开发者和web开发者,此外再增加一个直接入门RN没有其他任何基础的情况(项目所迫)...
  • RN开发总结

    2017-06-15 17:12:21
    RN开发总结 RN方案的优势 相对于纯原生开发,我们为什么要选择RN? 项目价值 提升产品迭代速度 APP迭代周期变短需求/交互评审不再需要与多端开发同时沟通产品走查不再需要同时兼顾IOS和安卓端,...
  • iOS原生接入RN开发模式和离线包 1、https://reactnative.cn/docs/integration-with-existing-apps/ 根据RN官网配置环境 2、 打包bundle,在package.json配置脚本如下 &quot;scripts&quot;: { &quot;...
  • RN开发新姿势

    2017-07-05 09:47:45
    RN开发新姿势? https://docs.expo.io/versions/v18.0.0/index.htmlhttps://segmentfault.com/a/1190000008709892 通过expo直接开发?运行js?
  • RN开发的五大缺点

    2018-09-04 14:57:36
    1. 项目版本更新维护较频繁; 2. 整体性能仍不如...3. 涉及底层的功能需要Android和Ios双端单独开发,JS调用; 4. 学习成本高;(需要熟悉原生) 5. 试错成本高,有些问题较少解决方案,易耽误开发进度。...
  • rn开发环境搭建

    2018-06-14 11:18:33
    1.Chocolatey是一个Windows上的包管理器,类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样:@powershell -NoProfile -ExecutionPolicy Bypass -Command &...
  • RN开发APP

    2020-03-08 13:01:21
    最近使用RN开发了一个APP 在开发中肯定离不开路由; RN中关于路由的配置:安装依赖react-navigation-stack; 创建路由import { createStackNavigator } from ‘react-navigation-stack’; 路由的跳转则要通过:...
  • RN开发环境配置

    2019-05-05 10:21:15
    开发环境配置: 安装 Xcode /Android Studio / Webstorm(VSCode) 安装git(Mac OSX 系统自带有git) 安装zsh sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" ...
  • 1. 创建新项目YangBoProject 使用 React Native 命令行工具来创建一个名为"YangBoProject"的新项目,终端中执行以下命令 react-native init YangBoProject react-native init YangBoProject --version 0.44.3 ...
  • VS Code 开源 轻量级:更少的内存和 CPU 占用率 更大的社区:插件,教程等 使用 JavaScript 和 TypeScript 时更好一点 更多“面向未来” WebStorm 更好的 PHP / Java 支持 ...Visual Studio ...
  • 1.准备React Native环境 2.Clone 项目 3.终端运行 npm i。 4.然后运行 react-native run-ios 或 react-native run-android https://github.com/hughcoder/HughRnApp 图片展示 ...RN App传送门 ...
  • 1.安装 Node, Watchman 官方参考 brew install node brew install watchman 如果出现出现 brew install node command not found bash 下执行 ruby -e "$(curl -fsSL ...
  • 简单的项目搭建运行其实很简单。本质就是:先装node.js,再装react-native-cli 即命令行工具,然后再用react-native 命令行工具创建工程,最后用命令运行工程。四步。首先是nodejs的安装,nodejs的安装是与你的操作...
  • React Native(以下简称RN)开发工具的文章很多,几乎千篇一律都是Copy的(一毛一样),本文结合自己的实践经历,推荐给Coder最实用的RN开发工具,RN开发工具用这一篇足矣! 概述:开发RN的工具有很多,选择性也...
  • 背景:在入门RN开发的过程中,发现公司项目代码中,有的项目是全是.js的后缀文件。有的项目全是ts、tsx、js 文件。心中很是疑惑,所以就写个文章记录下自己的解惑的过程。 js:是弱类型语言,容易出现一些编译时不...
  • https://mp.weixin.qq.com/s?__biz=MzA3NjgyNzk2Mw==&mid=2247483760&idx=1&sn=0393977133796e355248820ed7d4834d&chksm=9f5a1d24a82d9432922861d8499b6b3a168ebea04d5a17bad53ac83ce4b2d53b1991858c196e#rd这里没有...
1 2 3 4 5 ... 20
收藏数 24,200
精华内容 9,680
关键字:

rn开发