![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React Native开发
文章平均质量分 58
React Native开发
牛八少爷
工欲善其事,必先利其器
展开
-
WebStorm调试React Native项目
目录1.Chrome安装插件JetBrains IDE Support2. React Native的js不能直接调试3. 创建React Native配置3.1 打开Configurations3.2 添加React Native配置3.3 配置React Native3.4 开始调试React Native1.Chrome安装插件JetBrains IDE Su...原创 2018-08-24 23:24:48 · 1283 阅读 · 0 评论 -
AndroidStudio运行React-Native项目
React Native简介和环境搭建 介绍了环境搭建,已经通过react-native run-android命令来运行项目;今天来介绍如何使用AndroidStudio来运行React-Native项目;1.AndroidStudio打开RN项目AndroidStudio 打开或导入项目目录下的andriod目录即可;2. AndroidStudio配置gradle、sdk、b...原创 2018-08-20 23:40:41 · 13302 阅读 · 0 评论 -
React Native开发编辑器-Atom+Nuclide
目录1. Nuclide 1.1 Nuclide简介1.2 Nuclide支持平台2. Atom IDE2.1 Atom IDE简介2.2 Electron 简介2.3 Atom下载安装3. Atom安装Nuclide插件 1. Nuclide 1.1 Nuclide简介Nuclide IDE编辑器是Facebook推出的基于Atom的开发工具箱,用...原创 2018-08-20 23:40:24 · 775 阅读 · 0 评论 -
React Native(RN)开发遇到错误集合
官方错误解决方案:https://github.com/facebook/react-native/issues1.SDK找不到:react-native:SDK location not found. Define location with sdk.dir in the local.properties file ...2.JDK的Tools.jar找不到:react-native...原创 2018-08-20 23:40:04 · 816 阅读 · 0 评论 -
修改react-native项目到指定react-native版本
以更新项目react-native0.56.0更新为react-native0.55.4版本为例1 通过指令进入项目目录,依次输入下列指令:react-native run-android//卸载react-nativenpm uninstall react-native//安装0.55.4版本的react-nativenpm install --save react-nat...原创 2018-08-20 23:39:45 · 5132 阅读 · 0 评论 -
创建指定版本的react-native项目
目录 创建一般react-native项目:创建指定版本的react-native项目查看react-native版本创建一般react-native项目:react-native init 项目名称创建指定版本的react-native项目react-native init 项目名称 --version 0.55.4注:--version 前面必须两个“-...原创 2018-08-20 23:39:15 · 4987 阅读 · 0 评论 -
'react-native' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
'react-native' 不是内部或外部命令,也不是可运行的程序或批处理文件。错误原因:没有安装react-native;解决方案:查看npm目录下是否安装react-native-cli1.查看npm的安装目录npm root -g进入:C:\Users\Administrator\AppData\Roaming\npm\node_modules如果...原创 2018-08-20 23:38:53 · 20337 阅读 · 3 评论 -
error: bundling failed: Error: Unable to resolve module `AccessibilityInfo` from `
错误1:The development server returned response error code: 500URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false错误2:Loading dependency graph, done.error: bu...原创 2018-08-20 23:38:13 · 5449 阅读 · 0 评论 -
React Native创建Component组件的方式
1 ES6创建组件ES6创建Class基础Component:import React, {Component} from 'react';export default class MainView extends Component<Props> { render() { return ( <View> ...原创 2018-08-27 21:14:32 · 1015 阅读 · 0 评论 -
React Native项目导入js库-react-native-swiper库
1.项目的缺少js库2. 导入js库2.1 导入js库1. 鼠标移到缺少的js库,显示:2. 点击“More actions”,显示安装列表3. 选择“Install ‘react-native-swiper’ ”,开始安装2.2 使用npm安装js库npm install --save react-native-swiper ...原创 2018-08-27 21:14:04 · 857 阅读 · 0 评论 -
undefined is not an object (evaluating '_react3.default.PropTypes.string')
undefined is not an object (evaluating '_react3.default.PropTypes.string')<unknown>D:\Test2\RNApp\view\day1.js:13:33loadModuleImplementationD:\Test2\RNApp\node_modules\metro\src\lib\poly...原创 2018-08-27 21:13:31 · 1410 阅读 · 0 评论 -
AndroidStuio运行RN项目:Could not connect to development server.: Exception in native call
手机显示错误:Could not connect to development server.AndroidStudio显示错误:E/unknown:ReactNative: Exception in native call java.lang.RuntimeException: Unable to load script from assets 'index.androi...原创 2018-08-20 23:41:04 · 2837 阅读 · 0 评论 -
Atom+Nuclide使用技巧
1. 汉化AtomFile -> Setting -> Install ,输入 simplified-chinese-menu 安装chinakids的2. Atom自动补全插件直接搜索:Autocomplete 进行安装;原创 2018-08-20 23:41:22 · 619 阅读 · 0 评论 -
WebStorm调试javaScript
目录1. WebStorm调试官方视频:2. Chrome安装插件JetBrains IDE Support3. 设置ip地址和端口号3.1 查看WebStorm的Debugger端口3.2 设置JetBrains IDE Support4. WebStorm测试debug4.1 创建一个index.html4.2 js调试1. WebStorm调试官方视频:...原创 2018-08-24 23:22:38 · 10413 阅读 · 1 评论 -
Babel-cli将ES6转换ES5
1 Babel-cli现在JS盛行ES6,但是NodeJS对ES6的特性支持不够完整,Babel-cli可以直接运行ES6的代码,也可以把ES6转换为ES5;Bable-cli官网:https://www.babeljs.cn/docs/usage/cli/#babel-nodeNodeJS特性:https://nodejs.org/en/docs/es6/2. 安装Bable-c...原创 2018-08-24 23:22:10 · 7141 阅读 · 0 评论 -
Nodejs调试错误:SyntaxError: Unexpected token import
"D:\ProgramFile\IntelliJ\WebStorm 2018.2.2\bin\runnerw.exe" D:\ProgramFile\nodejs\node.exe --inspect-brk=51107 D:\Test\30-days-of-react-native-development\index.android.jsDebugger listening on ws://1...原创 2018-08-24 23:21:41 · 20551 阅读 · 1 评论 -
React Native的页面跳转组件-navigation
1. 新建React-Native项目参考:创建指定版本的react-native项目2. 安裝 react-navigationnpm install react-navigation --save3. 新建两个js文件:Main.js和Login.js3.1 创建js文件在项目目录中新建一个js文件夹,然后创建Main.js和Login.js;项目结构如下:...原创 2018-08-24 23:21:14 · 728 阅读 · 0 评论 -
React Native项目:undefined is not a function(evaluating '-react3.default.createClass')
undefined is not a function(evaluating '-react3.default.createClass')<unknown>D:\Test\RNApp\TicTacToeApp.js:186:39loadModuleImplementationD:\Test\RNApp\node_modules\metro\src\lib\polyfills...原创 2018-08-24 23:20:39 · 1986 阅读 · 1 评论 -
WebStorm运行项目配置错误:(function (exports, require, module, __filename, __dirname) { import { AppRegistry
“D:\ ProgramFile \ IntelliJ \ WebStorm 2018.2.2 \ bin \ runnerw.exe”D:\ ProgramFile \ nodejs \ node.exe D:\ Test \ RNApp \ index.js D:\ Test \ RNApp \ index.js: 1 (函数(exports,require,module,__ filenam...原创 2018-08-24 15:56:09 · 14629 阅读 · 0 评论 -
WebStorm导入React Native项目
1. File -> Open ->导入项目;2. 导入项目显示Node.js,不能直接运行直接运行index.js会出现错误,参考: WebStorm导入项目配置错误:(function (exports, require, module, __filename, __dirname) { import { AppRegistry } from 'react-native...原创 2018-08-24 15:55:22 · 5270 阅读 · 0 评论 -
Navigator is deprecated and has been removed from this package.
Navigator is deprecated and has been removed from this package. It can now be installed and imported from`react-native-deprecated-custom-components` instead of `react-native`. Learn about alternative...原创 2018-08-28 11:47:04 · 453 阅读 · 0 评论 -
React Native官方案例运行遇到 ndk-build.cmd'' finished with non-zero exit value 2
FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':ReactAndroid:buildReactNdkLib'.> Process 'command 'D:\ProgramFile\Android\android-ndk-r14b\ndk-build.cmd'' ...原创 2018-08-24 04:52:02 · 3986 阅读 · 3 评论 -
"name":"SyntaxError","message": Only one default export allowed per module. (126:0)"
The development server returned response error code: 500URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=falseBody:{"type":"TransformError","snippet":"\u001b[0m \u00...原创 2018-08-28 08:30:48 · 5378 阅读 · 0 评论 -
浅谈React的类型检测——PropTypes
Props验证使用PropTypes,React.PropTypes提供许多验证器来验证传入数据的有效性,当传入无效的数据时,JavaScript会抛出警告;为了性能考虑, React15.5.0以后React.PropTypes 和 React.createClass提取出“prop-types”库; 1. 安装prop-type: npm i...原创 2018-08-27 21:12:51 · 1344 阅读 · 0 评论 -
undefined is not an object (evaluating '_utils.ViewPropTypes.style')
undefined is not an object (evaluating '_utils.ViewPropTypes.style')<unknown>D:\Test\react-native-eyepetizer-master\node_modules\native-base\dist\src\basic\Tabs\DefaultTabBar.js:1loadModuleI...原创 2018-08-27 13:26:28 · 1018 阅读 · 0 评论 -
ERROR Packager can't listen on port 8081 Most likely another process is already using this port
ERROR Packager can't listen on port 8081Most likely another process is already using this portRun the following command to find out which process:错误原因:8081端口号被占用了;解决方案:关闭8081端口的程序;方法1 ...原创 2018-08-27 11:44:25 · 733 阅读 · 0 评论 -
React Native的android API -ReactAndroid开源项目
ReactAndroid是React Native的android开源项目;React Native源码:https://github.com/facebook/react-native/tree/master/ReactAndroidReact Native的Android API不同版本的React Native Android API和React Native Android源码...原创 2018-08-26 13:56:24 · 663 阅读 · 0 评论 -
Navigator is deprecated and has been removed from this package.installed and imported from ...
Navigator is deprecated and has been removed from this package. It can now be installed and imported from `react-native-deprecated-custom-components` instead of `react-native`. Learn about alternative...原创 2018-08-22 12:56:02 · 342 阅读 · 0 评论 -
Module `react-native-vector-icons/Ionicons` does not exist in the Haste module map
Loading dependency graph, done.error: bundling failed: Error: Unable to resolve module `react-native-vector-icons/Ionicons` from `F:\AndrtNative\RNApp\App.js`: Module `react-native-vector-icons/Io...原创 2018-08-22 11:10:31 · 3331 阅读 · 2 评论 -
error: more than one device/emulator 'adb' is not recognized as an internal or external command,
'adb' is not recognized as an internal or external command,operable program or batch file.Starting the app (D:\ProgramFile\Android\androidsdk/platform-tools/adb shell am start -n com.rnapp/com.rnapp...原创 2018-08-19 12:53:24 · 3469 阅读 · 0 评论 -
react-nativeCould not find tools.jar.Please check that D:\ProgramFile\java\jre8 contains a valid JDk
FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:compileDebugJavaWithJavac'.> Could not find tools.jar. Please check that D:\ProgramFile\java\jre8 conta...原创 2018-08-19 12:08:35 · 11842 阅读 · 4 评论 -
react-native:SDK location not found. Define location with sdk.dir in the local.properties file ...
FAILURE: Build failed with an exception.* What went wrong:A problem occurred configuring project ':app'.> SDK location not found. Define location with sdk.dir in the local.properties file or ...原创 2018-08-19 12:08:20 · 8044 阅读 · 0 评论 -
React Native简介和环境搭建
目录 1 React Native简介1.1 React Native简介1.2 原理1.3 React Native优势1.4 React Native劣势2. 环境搭建2.1 node 安装2.2 Python2安装2.3 安装JDK2.4 安装React Native CLI2.5 Android Studio安装2.6 Androi...原创 2018-08-19 07:40:23 · 1009 阅读 · 0 评论 -
React Native项目运行流程
目录1.创建新项目2. 运行流程3. 流程图1.创建新项目## RNApp 项目名称react-native init RNApp --version 0.55.4参考:创建指定版本的react-native项目2. 运行流程1. run-android运行react-native run-androidrun-android运行后从项目目录的node...原创 2018-08-26 08:13:34 · 1374 阅读 · 0 评论 -
ReactNative项目结构目录详解
React Native 结构目录React Native结构目录 名称 描述 android目录 Android项目目录,包含了使用AndroidStudio开发项目的环境配置文件; ios目录 iOS项目目录,包含了XCode的环境 node_modules目...原创 2018-08-26 06:17:38 · 5865 阅读 · 0 评论 -
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.This error is located at: in RCTView (at...原创 2018-08-27 02:42:51 · 27571 阅读 · 1 评论 -
Application xxxx has not been registered.
Application RNApp has not been registered.Hint: This error often happens when you're running the packager (local dev server) from a wrong folder. For example you have multiple apps and the packager ...原创 2018-08-27 02:52:45 · 4279 阅读 · 0 评论 -
Module is not installed, it is listed in package.json dependencies, and it is locally installed
Module is not installed less... (Ctrl+F1) Inspection info: Checks whether the module in the "require()" call or import statement exists, whether it is listed in package.json dependencies, and whether...原创 2018-08-27 10:20:42 · 5255 阅读 · 0 评论 -
React Native官方案例下载和编译
1 React Native官方案例下载github网址:https://github.com/facebook/react-nativeReact Native官方案例从0.44以后就不显示在master中,0.44版本的Examples只更新了UIExplorer,所以可以把0.44和0.43版本都下载下来,把0.44中的UIExplorer替换0.43中的UIExplorer;2...原创 2018-08-22 21:49:15 · 693 阅读 · 0 评论 -
react-native相关命令集
1. npm1. npm info react-native:查看react-native所有版本信息;2. npm uninstall react-native:卸载react-native;3. npm install --save react-native@0.55.4:安装指定版本react-native;4. npm install:安装最新版react-native...原创 2018-08-22 21:48:31 · 1195 阅读 · 0 评论