⑴ create-react-app4和5的区别
create-react-app是一种快速构建React应用程序的工具，可以自动生成开发环境和配置文件。create-react-app的版本从4.0开始，到目前的5.2。create-react-app 4.0和5.0之间的主要区别如下：支持的React版本不同：create-react-app 4.0支持React 16.9及以下版本，而create-react-app 5.0支持React 17及以上版本。新增的脚本命令：create-react-app 5.0新增了一些脚本命令，如npm start –inspect-brk，用于调试应用程序。默认使用Webpack 5：create-react-app 5.0默认使用Webpack 5，而create-react-app 4.0使用的是Webpack 4。
⑵ 如何管理React-Native库的版本
首先安装了nodejs 4.乏订催寡诎干挫吮旦经1 版本然后 安装了 npm install -g react-native-cli 模块安装 android sdk 并且配置android 环境变量安装gradle 环境进入 这个博客 里边有 react-native for android 项目，下载下来，然后执行 npm install 先安装 react 依赖模块包打开两个 命令窗口 1. 一个 执行react-native start ，另一个执行react-native run-android 就可以了
⑶ React新旧版本对比总结归纳(生命周期篇)
我们先来看下React16.0前后生命周期变化的图片 生命周期图谱： http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ ① componentWillMount ② componentWillReceiveProps ③ componentWillUpdate ① UNSAFE_componentWillMount ② UNSAFE_componentWillReceivePorps ③ UNSAFE_componentWillUpdate ① getDerivedStateFromProps ② getSnapShotBeforeUpdate ③ getDerivedStateFromError ④ componentDidCatch ○ 什么时候调用？ 这个方法会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。 ○ 返回值 返回值是必须的，它应该是一个对象，用于更新state; 如果返回值为null，state不更新。 ○ 主要用途？ 这个生命周期函数是为了替代componentWillReceiveProps存在的，所以在你需要使用componentWillReceiveProps的时候，就可以考虑使用getDerivedStateFromProps来进行替代。主要是将新的props更新到state上 看下边例子就明白了！ ○ 什么时候调用？getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。 ○ 返回值 应返回 snapshot 的值（或 null） ○ 有什么用途？ 它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。 ○ 什么时候调用？ 此生命周期会在渲染阶段后代组件抛出错误后被调用，因此不允许出现副作用。 ○ 返回值 它将抛出的错误作为参数，并返回一个值以更新 state ○ 有什么用途？ 主要用于封装错误边界用，收集错误信息并做对应处理。 以下为具体用法用例 然后你可以将它作为一个常规组件去使用：○ 什么时候调用？ 此生命周期会在“提交”阶段后代组件抛出错误后被调用，因此允许执行副作用。 ○ 参数 error —— 抛出的错误。 info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。 ○ 返回值 它将抛出的错误作为参数，并返回一个值以更新 state ○ 有什么用途？ 主要用于封装错误边界用，收集错误信息并做对应处理。 用例如下： 结论：对于新生命周期③和④作用基本是一致的，都是用于封装错误边界，收集边界下后代组件构造函数中发生的错误信息并作出对应处理。不同的是调用时间和返回参数。
⑷ RN笔记：RN开发环境+项目依赖
前言 ：从前端的发展历程上看，从切图仔到全端，注定有舍有得，边界会越来越大，技术会越来越丰富，贯穿浏览器、服务端和移动端多元化发展趋势。花了一天时间纠结用HTML5+和RN来开发安卓ios双端，考虑稳定性选择用RN，做好被虐上整整一个月的心理准备，开发过程中事实也确实如此，坑多慎入。 另外建议当决定要用RN重构应用或者基于RN开发时，尽量提前梳理业务文档，有条件先组预研发小组，去研究业务实现的可能性，比如说集成外部的sdk，切记原生部分最好要求配合安卓ios朋友一起合作，否则会很难受。 从技术角度，入坑先从vue跳到react，再入react-native。此文章主要记录项目开发中填坑过程。
react-native init 项目名 tip:react-native 版本更新较快，init默认是最新版本的react-native，目前最新发布版本0.60.0版本（更新修复，支持androidX，完全删除了WebView，Geolocation…），也可根据需要创建指定版本RN： react-native init 项目名 –version 0.59.9 进入项目目录查看react-native版本 ：react-native -V
接着在项目目录下，命令行服务端口 react-native start
点击启动按钮，选择模拟器就可启动项目
真机启动：用usb连接电脑和手机（手机必须在开发者选项下，打开usb调试模式，否则启动会报错），在项目目录下，命令行启动： react-native run-android App安装完成，node窗口进度条走完即可在手机上运行RN项目。
模拟器与真机开发者菜单主要用到：Reload （重载），Debug JS Remotely(Debug 调试模式，可在浏览器中console.log输出)，Enable Hot Reloading(热更新)； 开发者菜单打开方式： 模拟器：ctrl+m ， r+r(为reload) 真机：手机摇一摇，或者左键长按
根据项目需要可选择安装依赖插件，示例项目依赖
依赖安装方法： yarn install //安装全部依赖 yarn add 依赖名 //安装单个依赖 yarn add 依赖名@版本号 //安装依赖某个版本 yarn remove 依赖名 //删除依赖 ，删除依赖后，需要把安卓ios原生文件中删除依赖
需要依赖原生库 react-native link 依赖内一次性全部链接 react-native link 依赖名 链接某一个库
假设，根据项目需要修改了依赖包源码，在项目根目录复制修改源码的包， 在pagejson.json文件修改文件安装路径。
⑸ react native gradle怎么升级
更新版本的React Native将会让你访问更多的APIs， 这样我们可以去使用更多的APIs,视图Views，以及开发者工具以及其他一些好用的东西。浏览版本更新日志就会发现整体FB官方开发进度还是非常紧张的，这样就很容易导致旧版本会出现不能用的情况，后期可能会出现不可预料的情况，这边建议大家尽量更新最新正式版本。我们大家都知道一个React Native项目使用Android项目,iOS项目和JavaScript项目三部分进行组成的，而且三者都关联打包在npm包内的，所以该项目版本进行更新是比较繁琐的。下面我来给大家讲解一下React Native项目的升级步骤。一、查看当前版本[plain] view plain <span style="font-family:SimSun;font-size:14px;">[email protected]:~/AwesomeProject$ react-native –version react-native-cli: 0.2.0 react-native: 0.22.2</span> 二、查看最新的版本[plain] view plain <span style="font-family:SimSun;font-size:14px;">[email protected]:~/AwesomeProject$ npm info react-native { name: 'react-native', 'dist-tags': { latest: '0.25.1', next: '0.26.0-rc' }, versions: [ '0.0.0', '0.0.5', … … '0.24.1', '0.25.0-rc', '0.25.1', '0.26.0-rc' ], maintainers: … … dist: { shasum: '', tarball: 'https://registry.npmjs.org/react-native/-/react-native-0.25.1.tgz' }, directories: {} }</span> 三、升级依赖的版本[plain] view plain <span style="font-family:SimSun;font-size:14px;">[email protected]:~/AwesomeProject$ npm install –save [email protected] > [email protected] install /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil > node-gyp rebuild make: Entering directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil/build' CXX(target) Release/obj.target/bufferutil/src/bufferutil.o SOLINK_MODULE(target) Release/obj.target/bufferutil.node COPY Release/bufferutil.node make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil/build' > [email protected] install /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate > node-gyp rebuild make: Entering directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate/build' CXX(target) Release/obj.target/validation/src/validation.o SOLINK_MODULE(target) Release/obj.target/validation.node COPY Release/validation.node make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate/build' > [email protected] postinstall /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/yeoman-generator/node_moles/cross-spawn/node_moles/spawn-sync > node postinstall npm WARN optional dep failed, continuing [email protected] [email protected] node_moles/react-native ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── word[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ├── optimi[email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) └── [email protected] ([email protected], [email protected], babel-plugin-transform-es2015-template-[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])</span>
⑹ 怎么看react build是什么版本
安装node.js由于nodejs中使用GYP进行项目构建管理，而GYP是基于Python的构建工具。因此，需要先安装Python。此外，在Windows系统下，nodejs采用GYP来生成Visual Studio Solution文件后，需要通过C++的编译器将其编译为二进制文件。因此，又需要先安装C++编译环境。最后，安装nodejs【墙裂建议选择stable稳定版】。一系列安装完成后，进入cmd，输入"npm"指令后回车，出现形同以下画面内容，则安装成功。需要配置path，加入如：E:\Android\Python27;C:\Users\che\AppData\Roaming\npm;
⑺ react native realse版本apk 怎么看日志，
访问App内的开发菜单你可以通过摇晃你的设备或者选择iOS模拟器的Hardware菜单中的“Shake Gesture”来打开开发者菜单。你还可以在app运行于iPhone模拟器时使用Command+D快捷键，或者在运行Android模拟器时使用Command+M快捷键。
⑻ 如何查看 jpush-react-native 的版本
首先确保你的电脑和手机设备在同一个Wi-Fi环境下。 其次你需要开启USB调试才能在你的设备上安装你的APP。一定要确定你已经打开设备的USB调试开关! 确保你的设备已经被成功连接，可以输入adb devices核实
