2018-05-18 18:13:01 qq_35394891 阅读数 146
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5624 人正在学习 去看看 李文瀚

变化1:

注意在最新的0.51版本的reactNative的引入外部组件的方式发生了变化

之前的引入方式: 

 

注意下方有绿色的波浪线一般语法上都有问题,所以运行在模拟器上也会报response 500的错

0.51的引入方式:

import Main from "./Component/Main/XMGMain"

变化2 :

0.51 组件导出和创建组件类的方式也方式变化

之前的导出方式:


现在导出的方式:


之前创建class的方式:


 现在创建的class方式和导出合并在一起,如上面第二张图

异常1:


原因:现在的reactnative 版本中的react-native包中navigator已经被去除了,要下载需要去其他包中

解决:cmd----》进入项目的根目录,输入npm install react-native-deprecated-custom-components --save

----》在项目js中引入即可

 import {Navigator} from ‘react-native-deprecated-custom-components’;


异常2:

 

这个异常就是模拟器连接断开了

解决:在任务管理器中找到adb.exe进程删除,在进入项目根目录输入react-native run-android 重启即可

异常3:


注意,这个异常有点不好看到真正错在哪了,因为直接首部给你报了个 response 500 ,但我们仔细看下下面的老长的报错解释还是能发现关键的,首先输出的报错信息是一种json格式,其中有个属性是‘lineNumber’指定了出错的可能位置,记得是可能位置,一般是它指定的位置以及向上的位置,紧接着在lineNumber下面的第二个属性'name' 指定了错误的类型,这里是SyntaxError(语法错误),在下面紧接着是massage,这里描述了错误的原因,从中可以看到原来错误的文件是App.js ,错误的描述是Duplicate daclaration \"Navigator\" ,就此定位到了错误的大概位置和知道了错误的原因。

注意一般错误也会在reactNative:8081服务器上显示,有时reactNative显示的错误更加直观,如下面



异常4: 

java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException

而且react服务器闪退


解决方案: 1.先删除任务管理器中的所有adb.exe进程,重新运行reactnative项目

                  2.删除C:\Users\Administrator\firstDemo\android\app\build\generated\source\r\debug目录下的文件

                 3.重新创建react-native项目,注意不要在c:\user/adminstator 中创建,因为这会导致一定的权限问题而使项目启动报这种错误!(我是这个原因)

异常5:

   DeviceException Could not create ADB Bridge错误

解决方案: 1.这里我的原因是在系统变量中配置的path中的指向android 的platform-tools没有生效,所以直接将platformtools的路径直接写进去,从而成功了,不在使用%ANDROID_HOME%\platform的方式

                      2.删除任务管理器中的java.exe、adb.exe、360手机助手,再次重新启动

外链接: 常用错误汇总:

https://blog.csdn.net/chichengjunma/article/details/52943013

2018-09-29 16:31:53 xl4025 阅读数 261
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5624 人正在学习 去看看 李文瀚

按照官网https://reactnative.cn/docs/getting-started.html

进行配置,根据步骤配置完成后,运行提示:

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"originModulePath":"F:\\codes\\js\\AwesomeProject\\index.js","targetModuleName":"@babel/runtime/helpers/interopRequireDefault","message":"Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `F:\\codes\\js\\AwesomeProject\\index.js`: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.","errors":[{"description":"Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `F:\\codes\\js\\AwesomeProject\\index.js`: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`."}],"name":"Error","stack":"Error: Unable to resolve module `@babel/runtime/helpers/interopRequireDefault` from `F:\\codes\\js\\AwesomeProject\\index.js`: Module `@babel/runtime/helpers/interopRequireDefault` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.\n  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.\n    at ModuleResolver.resolveDependency (F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\node-haste\\DependencyGraph\\ModuleResolution.js:209:1301)\n    at ResolutionRequest.resolveDependency (F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\node-haste\\DependencyGraph\\ResolutionRequest.js:83:16)\n    at DependencyGraph.resolveDependency (F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\node-haste\\DependencyGraph.js:238:485)\n    at Object.resolve (F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\lib\\transformHelpers.js:180:25)\n    at dependencies.map.result (F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:311:29)\n    at Array.map (<anonymous>)\n    at resolveDependencies (F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:307:16)\n    at F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:164:33\n    at Generator.next (<anonymous>)\n    at step (F:\\codes\\js\\AwesomeProject\\node_modules\\metro\\src\\DeltaBundler\\traverseDependencies.js:266:307)"}
processBundleResult
    BundleDownloader.java:296
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:174
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1162
run
    ThreadPoolExecutor.java:636
run
    Thread.java:764

错误信息,通过找资料,找人请教执行:

yarn add @babel/runtime --dev

后成功运行成功。

2、在使用启动虚拟安卓机时,总是提示   abd已终止运行,重启,重建安卓虚拟机都不行;最后在https://blog.csdn.net/xmc281141947/article/details/73457844   中找到解决方法;

原因是我原来安装过abd,原来的abd不知道怎么回事启动造成的,需要终止原来的abd程序,再次运行成功;

3、在长时间启动安卓虚拟机时,在运行程序后可能会找不到设备,需要重新启动安卓虚拟机

2017-08-27 21:54:00 wn1245343496 阅读数 10185
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5624 人正在学习 去看看 李文瀚

这里写图片描述
在运行ReactNative项目的时候,手机上经常会出现这种错误,解决办法:
在当前项目的路径下分别运行以下命令:

npm uninstall babel-preset-react-native

npm install babel-preset-react-native@2.1.0 —save

如果你是用的yarn的话,需要将npm修改为yarn

yarn remove babel-preset-react-native

yarn add babel-preset-react-native@2.1.0

或者直接将根目录下的package.json文件里面的babel-preset-react-native的版本修改为2.1.0
然后执行npm update
这里写图片描述
最后,重新运行项目即可

2019-10-29 10:46:06 he_wen_jian 阅读数 23
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5624 人正在学习 去看看 李文瀚

踩坑一:

通过ReactNative中文网提供的方法: react-native init MyTSProject --template typescript 创建项目,项目初始化运行就报500,也不知道怎么处理

解决方案一:

根据网上博客的思路:

删除全局安装的react-native-cli
npm uninstall -g react-native-cli

然后使用npx安装:
npx react-native init app --template react-native-template-typescript

耐心等待安装结束后即可进行TypeScript开发

解决方案二:

1:package.json中添加:

"devDependencies": {
    "react-native-typescript-transformer": "^1.2.12",
    "react-test-renderer": "16.8.3",
    "typescript": "^3.5.3"
  },

2:在项目根目录下创建文件:tsconfig.json

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es2015",
    "moduleResolution": "node",
    "jsx": "react-native",
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "watch": false,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "es2015.promise",
      "es2015",
      "es2016",
      "dom"
    ]
  },
  "filesGlob": [
    "app/**/*.ts",
    "app/**/*.tsx"
  ],
  "exclude": [
    "index.android.js",
    "index.ios.js",
    "build",
    "node_modules"
  ]
}

3:创建文件:rn-cli.config.js

module.exports = {
    getTransformModulePath() {
        return require.resolve('react-native-typescript-transformer');
    },
    getSourceExts() {
        return ['ts', 'tsx'];
    },
};

4:完成以上3个步骤后,运行:yarn install,成功执行该命令后即可进行TypeScript开发

 

 

 

 

 

2018-08-13 11:49:19 qq_42148925 阅读数 2227
  • ReactNative初级到项目实战

    对课程有什么问题或者有什么好的建议都可以联系Hank老师QQ:471926977 从技术角度,可以满足好奇心,提高技术水平;从 职业角度,有利于求职和晋升,有利于参与潜力大 的项目。 新颖、实用、详尽的ReactNative初级课程,本 教程涵盖ReactNative官方的新组件和实践,甚 至包括尚未正式发布的新特性 时”!

    5624 人正在学习 去看看 李文瀚

react native Windows红屏报错500

-react-native run-android出现
这里写图片描述
这个内容其实很简单,这个主要是兼容的问题,因为react native 是Facebook使用苹果操作系统来完成的所以Windows的兼容不是很好现在当下版本为热爱react-native0.56.0他的bug很多兼容不好那么接下来我们把它降低一个版本使用0.55.4的
(1)打开控制台找到你要降低版本的所在盘
(2)输入react-native init 你的文件名 –version 0.55.4
这样就完了降低版本

到这步完成了不要着急去run它因为还缺失了一个文件

但是!!!!!!!这样还是没有完的原因很简单就是重新下载下来的reactnative缺了一个文件那就是assets文件那么接下来我们把它补全使用Android studio将项目打开

1.在android\app\src\main下新建assets文件
2.打开控制台
3.在项目根目录下执行react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/
接下来就可以run了
控制台输入react-native run-android
这里写图片描述

没有更多推荐了,返回首页