分类前端开发下的文章

2019-04-28

React-Native学习笔记 React-Native学习笔记起步注意不要使用别人的demo code做练习，因为react-native更新很快，第三方插件更新也很快，如果你使用的是最新版本，别人代码嵌入你自己的demo将举步维艰。基础看完重点放在官方插件上。 react-navigation重点：一般搭建app基础工程，app肯定需要导航，路由等，官方推荐react-navigation。注意线上中文相关文档帖子大部分都是3.*之前的版本，按其安装会报一些错，下面碰到的几个列一下。常规错误 Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module `react-native-gesture-handler` from `/Users/apple/Code/04-IOS/pixeleye/node_modules/@react-navigation/native/src/Scrollables.js`: Module `react-native-gesture-handler` does not exist in the Haste module map This might be related to https://github.com/facebook/react-native/issues/4968 To resolve try the following: 1. Clear watchman watches: `watchman watch-del-all`. 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`. 3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`. (null)) __38-[RCTCxxBridge loadSource:onProgress:]_block_invoke.228 RCTCxxBridge.mm:414 ___ZL36attemptAsynchronousLoadOfBundleAtURLP5NSURLU13block_pointerFvP18RCTLoadingProgressEU13block_pointerFvP7NSErrorP9RCTSourceE_block_invoke.118 __80-[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:]_block_invoke -[RCTMultipartStreamReader emitChunk:headers:callback:done:] -[RCTMultipartStreamReader readAllPartsWithCompletionCallback:progressCallback:] -[RCTMultipartDataTask URLSession:streamTask:didBecomeInputStream:outputStream:] __88-[NSURLSession delegate_streamTask:didBecomeInputStream:outputStream:completionHandler:]_block_invoke __NSBLOCKOPERATION_IS_CALLING_OUT_TO_A_BLOCK__ -[NSBlockOperation main] -[__NSOperationInternal _start:] __NSOQSchedule_f _dispatch_call_block_and_release _dispatch_client_callout _dispatch_continuation_pop _dispatch_async_redirect_invoke _dispatch_root_queue_drain _dispatch_worker_thread2 _pthread_wqthread start_wqthread 如果是react-navigation相关的，原因是没有安装react-native-gesture-handler，安装即可。 npm install --save react-native-gesture-handler 重新编译。 Unhandled JS Exception: undefined is not an object (evaluating '_react.default.PropTypes.string') RCTFatal -[RCTExceptionsManager reportFatalException:stack:exceptionId:] __invoking___ -[NSInvocation invoke] -[NSInvocation invokeWithTarget:] -[RCTModuleMethod invokeWithBridge:module:arguments:] facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&) facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int) _dispatch_call_block_and_release _dispatch_client_callout _dispatch_lane_serial_drain _dispatch_lane_invoke _dispatch_workloop_worker_thread _pthread_wqthread start_wqthread 新版本prop-types独立出来，如果使用就接口会找不到，需要安装对应插件。 npm install prop-types --save react-navigation注意事项避免导航器内部的screen在渲染另一个导航器。参考https://reactnavigation.org/docs/en/common-mistakes.html说明。如果确实需要这么使用在组件标签内需要添加navigation={this.props.navigation}。如果将AppContainer包装在View中，请确保View正在使用flex。这个不知道什么原理，贴出demo。 import React from 'react'; import { Text, View } from 'react-native'; import { createBottomTabNavigator, createAppContainer } from 'react-navigation'; class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home!</Text> </View> ); } } class SettingsScreen extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Settings!</Text> </View> ); } } const TabNavigator = createBottomTabNavigator({ Home: HomeScreen, Settings: SettingsScreen, }); const AppContainer = createAppContainer(TabNavigator); // without the style you will see a blank screen export default () =><View style={{flex: 1}}><AppContainer/></View>; react-navigation@2.14.0之前是all screens are essentially regular native View in each platform所以增加了内存的消耗（官方原话就不翻译了，不知道platform指的是什么，是android/ios还是手机）。 react-navigation的动态路由：官方不推荐使用动态路由，React Navigation目前在静态定义路由的情况下效果最佳的。如果真的需要动态路由参考https://reactnavigation.org/docs/en/params.html 。 React-navigation在3D触控设备上不支持peek & pop功能。注意：官方文档import Ionicons from 'react-native-vector-icons/Ionicons';替换成import Icon from 'react-native-vector-icons/Ionicons';。高阶组件：withNavigation是一个高阶组件，它可以将navigation这个prop传递到一个包装的组件。当你无法直接将navigation这个prop传递给组件，或者不想在深度嵌套的子组件中传递它时，它将非常有用。屏幕进入或者推出时出发函数（比如比如停止播放视频或音频文件，或停止跟踪用户的位置。）使用react-navigation提供的withNavigationFocus高阶组件。使用事件监听器收听'didFocus'事件。参考https://reactnavigation.org/docs/zh-Hans/function-after-focusing-screen.html 其他插件 React-native开发-Unrecognized font family ‘Ionicons’ 解决：https://blog.csdn.net/zhaolaoda2012/article/details/82627735 新版本的Ionicons已经替换为Icon。 import Icon from 'react-native-vector-icons/Ionicons';

2019年04月28日

2017-12-08

Angular2使用中的一下注意事项与问题 Angular2使用中的一下注意事项与问题在angular2项目中 compass的使用在头部引入 @import "~compass-mixins/lib/compass/css3"; 而不是 @import "compass/css3"; ng2-file-upload预览的实现第一种使用 platform-brower import {DomSanitizer, SafeUrl} from "@angular/platform-browser"; 这种方式有极限，浏览器支持比较少第二种使用编写一个指令 import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core'; @Directive({ selector: 'img[imgPreview]' }) export class ImagePreviewDirective implements OnChanges { @Input() image: any; constructor(private el: ElementRef, private renderer: Renderer) {} ngOnChanges(changes: SimpleChanges) { const reader = new FileReader(); const el = this.el; reader.onloadend = function (e) { el.nativeElement.src = reader.result; }; if (this.image) { return reader.readAsDataURL(this.image); } } } Angular2 使用websocket sockjs和stomp碰到 Cannot resolve module 'net' https://github.com/jmesnil/stomp-websocket/issues/119 我的处理方式安装net模块 stomp必须依赖于sockjs运行，否则程序无法运行 centos下ng-client无法npm install的问题angular2-image-popup@1.1.2 postinstall /opt/soft/ngclient/node_modules/angular2- angular2-image-popup@1.1.2 postinstall /opt/soft/ngclient/node_modules/angular2-image-popup \> typings install /opt/soft/ngclient/node_modules/configstore/index.js:48 throw err; ^ Error: EACCES: permission denied, open '/root/.config/configstore/typings.json' You don't have access to this file. at Object.fs.openSync (fs.js:652:18) at Object.fs.readFileSync (fs.js:553:33) at Configstore.get all [as all] (/opt/soft/ngclient/node_modules/configstore/index.js:29:25) at new Configstore (/opt/soft/ngclient/node_modules/configstore/index.js:25:46) at Object.<anonymous> (/opt/soft/ngclient/node_modules/typings-core/dist/utils/store.js:5:19) at Module._compile (module.js:573:30) at Object.Module._extensions..js (module.js:584:10) at Module.load (module.js:507:32) at tryModuleLoad (module.js:470:12) at Function.Module._load (module.js:462:3) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) https://github.com/yeoman/yeoman.github.io/issues/282 解决的方法：执行： chmod g+rwx /root /root/.config /root/.config/configstore ng-client在centos npm install无法安装 message EACCES: permission denied, open '/opt/yjmicro-saas-ngclient/node_modules/angular2-image-popup/typings/index.d.ts' typings ERR! typings ERR! cwd /opt/yjmicro-saas-ngclient/node_modules/angular2-image-popup typings ERR! system Linux 3.10.0-123.el7.x86_64 typings ERR! command "/usr/local/src/node/bin/node" "/opt/yjmicro-saas-ngclient/node_modules/.bin/typings" "install" typings ERR! node -v v8.9.1 typings ERR! typings -v 2.1.1 typings ERR! code EACCES typings ERR! typings ERR! If you need help, you may report this error at: typings ERR! <https://github.com/typings/typings/issues> npm WARN bootstrap@4.0.0-beta requires a peer of popper.js@^1.11.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: angular2-image-popup@1.1.2 (node_modules/angular2-image-popup): npm WARN optional SKIPPING OPTIONAL DEPENDENCY: angular2-image-popup@1.1.2 postinstall: `typings install` npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1 解决： npm config set unsafe-perm=true 参考：https://github.com/Microsoft/WSL/issues/14

2017年12月08日

2017-02-10

node-sass 安装卡在 node scripts/install.js 解决办法 node-sass 安装卡在 node scripts/install.js 解决办法一个 node 项目里用到了 node-sass@3.8.0 ，安装的时候在这一步： > node-sass@3.8.0 install path/to/project/node_modules/node-sass > node scripts/install.js 一直卡住，至少有半个小时没反应，自己的 Mac 和腾讯云的服务器上都是这样去看 node_modules/node-sass/scripts/install.js 的代码，发现是要在 GitHub 上下载编译好的 node-sass 二进制包，去看 node-sass 的 Release ，平均在 2.5 MB 左右于是明了了，GitHub 在国内访问本来就不稳定，然后还是用 request 去访问，就更慢了。看了一下，半个小时左右才下了 500 K 正好又在这里的 getBinaryPath() 可以设置二进制的位置。在这之前还要先知道自己的系统需要的版本。用这行命令： node -p "[process.platform, process.arch, process.versions.modules].join('-')" 复制输出的结果，去 Release 列表找到对应的版本，Ctrl+F 粘贴，找到那个文件，下载（必要的时候挂代理，浏览器下载通常都比 node 下载更快更稳定），然后文件存到一个稳定的路径，并复制路径（比如 ~/.node/.npm/node-sass/darwin-x64-48_binding.node，windows下拷贝到AppData\Roaming\npm-cache\node-sass对应的版本下）在 ~/.npmrc 下面新增一行，新增 sass_binary_path 项并填入刚才的路径，比如 sass_binary_path=/home/ubuntu/.npm/node-sass/darwin-x64-48_binding.node 最后再去项目目录下： rm -rf node_modules/ && npm i

2017年02月10日

2017-02-10

部署angular2-start碰到的问题部署angular2-Strat碰到的问题基本都是墙的问题：下载不了- node-sass无法下载通过node -p "[process.platform, process.arch, process.versions.modules].join('-')"查看系统对应的版本 https://github.com/sass/node-sass/releases 在官方下载对应的版本 selenium-server-standalone-2.53.1 下载问题 https://github.com/mozilla/geckodriver/releases/download/v0.11.1/geckodriver-v0.11.1-win64.zip 下载问题存放到提示错误的目录内 https://github-cloud.s3.amazonaws.com/releases/25354393/63b38414-8ee8-11e6-86d9-7cd52823928c.zip?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISTNZFOVBIJMK3TQ%2F20170210%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20170210T081906Z&X-Amz-Expires=300&X-Amz-Signature=2285da35b200def61e6ee64102902a84c72fbb57a00f989b74ee3b69ce322a58&X-Amz-SignedHeaders=host&actor_id=5735392&response-content-disposition=attachment%3B%20filename%3Dgeckodriver-v0.11.1-win64.zip&response-content-type=application%2Foctet-stream 下载完重命名为对应的版本号如： chromedriver_2.26win32.zip 并解压和重命名解压文件chromedriver_2.26.exe

2017年02月10日

2017-02-04

安装 nrm 自由切换 npm 源国内镜像提升下载速度安装 nrm 自由切换 npm 源国内镜像提升下载速度基于 npm ，全局安装以后，你开源无缝快速切换几个源，提高下载速度，拒绝 loading ！安装 npm install -g nrm 开源地址 https://github.com/Pana/nrm 使用查看帮助 ➜ /Users/zhangzhi/code >nrm -h Usage: nrm [options] [command] Commands: ls list all the registries current show current registry name use <registry> change registry to registry add <registry> <url> [home] add one custom registry del|rm <registry> delete one custom registry home <registry> [browser] open the homepage of registry with optional browser test [registry] show response time for specific or all registries help print this help Options: -h, --help output usage information -V, --version output the version number 查看当前支持切换的源 ➜ /Users/zhangzhi/code >nrm ls npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/ * taobao - http://registry.npm.taobao.org/ edunpm - http://registry.enpmjs.org/ eu ----- http://registry.npmjs.eu/ au ----- http://registry.npmjs.org.au/ sl ----- http://npm.strongloop.com/ nj ----- https://registry.nodejitsu.com/ pt ----- http://registry.npmjs.pt/ 上面列出了可选的9个源，还用 * 号标记出了当前我使用的源切换指定的源假如现在我想把 taobao 源切换成 eu 的镜像源( 貌似走的教育网，我也不确定速度是不是快，只是演示切换) ➜ /Users/zhangzhi/code >nrm use eu Registry has been set to: http://registry.npmjs.eu/ 切换后的源列表 ➜ /Users/zhangzhi/code >nrm ls npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/ taobao - http://registry.npm.taobao.org/ edunpm - http://registry.enpmjs.org/ * eu ----- http://registry.npmjs.eu/ au ----- http://registry.npmjs.org.au/ sl ----- http://npm.strongloop.com/ nj ----- https://registry.nodejitsu.com/ pt ----- http://registry.npmjs.pt/ 可以看到源已经切换成了 eu 你还可以添加已知的源，或者删除

2017年02月04日