ReactNative | 漂泊80

ReactNative创建自己的三方库

2018-10-18 • ReactNative • 0 条评论

npm install -g react-native-create-library

1	npm install -g react-native-create-library

react-native-create-library --package-identifier xxx包名 --platforms android,ios 项目名

1	react-native-create-library --package-identifier xxx包名 --platforms android,ios 项目名

mv cardview react-native-xxx

1	mv cardview react-native-xxx

npm config get registry

1	npm config get registry

发布

 npm publish --registry http://registry.npmjs.org/

1	npm publish --registry http://registry.npmjs.org/

更新

npm version <strong>patch</strong> --registry http://registry.npmjs.org/

1	npm version <strong>patch</strong> --registry http://registry.npmjs.org/

参考链接

开发自己的react-native组件并发布到npm

在使用淘宝镜像的情况下发布npm包

ReactNative 0.57.1

2018-10-03 • ReactNative • 0 条评论

react-native init CMBoxRN -package "com.bbs.cmbox"

1	react-native init CMBoxRN -package "com.bbs.cmbox"

yarn add @babel/runtime

1	yarn add @babel/runtime

  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 -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

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 -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

react-native start --reset-cache

1	react-native start --reset-cache

 unlink node_modules/react-native/scripts/third-party/glog-0.3.5/test-driver

1	unlink node_modules/react-native/scripts/third-party/glog-0.3.5/test-driver

ReactNative开发之疑难杂症2

2018-09-20 • ReactNative • 0 条评论

main.jsbundle does not exist. This must be a bug with

1	main.jsbundle does not exist. This must be a bug with

package.json中添加如下命令,

"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"

1	"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"

运行

yarn build:ios

1	yarn build:ios

参考链接

https://github.com/facebook/react-native/issues/18313

ReactNative开发之WebView

2017-12-28 • ReactNative • 0 条评论

1.webview高度自适应可以使用react-native-autoheight-webview

2.提示如下错误
The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.
直接编辑工程文件下的Info.plist文件，加入以下代码

　&lt;key&gt;NSAppTransportSecurity&lt;/key&gt;  
　　&lt;dict&gt;  
　　　　&lt;key&gt;NSAllowsArbitraryLoads&lt;/key&gt;
　　　　&lt;true/&gt;  
　　&lt;/dict&gt;

　<key>NSAppTransportSecurity</key>

　　<dict>

　　　　<key>NSAllowsArbitraryLoads</key>

　　　　<true/>

　　</dict>

参考链接
– https://www.cnblogs.com/36bian/p/5237138.html

3 react-native-webview-bridge

https://github.com/alinz/react-native-webview-bridge/issues/236

ReactNative开发之截图保存到手机

2017-12-05 • ReactNative • 0 条评论

rn自身takeSnapshot方法截图只支持iOS平台，需要借助三方开源库
react-native-view-shot

yarn add react-native-view-shot
react-native link react-native-view-shot

yarn add react-native-view-shot

react-native link react-native-view-shot

安装成功后调用根据view截屏

import { captureRef } from "react-native-view-shot";

captureRef(viewRef, {
  format: "jpg",
  quality: 0.8
})
.then(
  uri =&gt; console.log("Image saved to", uri),
  error =&gt; console.error("Oops, snapshot failed", error)
);

import { captureRef } from "react-native-view-shot";

captureRef(viewRef, {

format: "jpg",

quality: 0.8

})

.then(

uri => console.log("Image saved to", uri),

error => console.error("Oops, snapshot failed", error)

);

根据获得url保存图片
CameraRoll .saveToCameraRoll
这里需要注意的是iOS需要引入libRCTCameraRoll.a

ReactNative开发之Gradle

2017-12-02 • ReactNative • 0 条评论

查看项目依赖关系

./gradlew -q app:dependencies

1	./gradlew -q app:dependencies

参考链接

零散知识点总结(1) – Gradle 使用配置总结

ReactNative开发之自定义字体

2017-11-28 • ReactNative • 0 条评论

下载需要字体的ttf文件

ios程序放在对应的资源文件，在list中Fonts provided by application添加索引

//查找字体名   
NSArray *array = [UIFont familyNames];  
for  (NSString * familyname in array) {  
    NSLog(@"Family:%@" ,familyname);  
    NSArray *fontnames = [UIFont fontNamesForFamilyName:familyname];  
    for  (NSString *name in fontnames) {  
        NSLog(@"Font Name:%@" ,name);  
    }  
}

//查找字体名

NSArray *array = [UIFont familyNames];

for (NSString * familyname in array) {

NSLog(@"Family:%@" ,familyname);

NSArray *fontnames = [UIFont fontNamesForFamilyName:familyname];

for (NSString *name in fontnames) {

NSLog(@"Font Name:%@" ,name);

}

ReactNative开发之使用flow

2017-11-26 • ReactNative • 0 条评论

从一开始开发就使用flow是很有必要的，安装方式官网有说。

使用是在需要检查文件开头

/*
*flow
*/

*flow

ReactNative开发之特殊语法

2017-10-23 • ReactNative • 0 条评论

1.除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。

'use strict'

1	'use strict'

2.按 es6 的规范 import * as obj from "xxx" 会将 "xxx" 中所有 export 导出的内容组合成一个对象返回。如果都使用 es6 的规范，这个是很明确的。

import * as obj from "xxx"

1	import * as obj from "xxx"

3.扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

参考链接

ReactNative开发之Chrome调试

2017-10-22 • ReactNative • 0 条评论

1.切换Chrome的窗口布局

2.在Chrome中，按下⌘ + option + i
或者选择视图(View) -> 开发者(Developer) -> 开发工具(Developer Tools)

3:打开有异常时暂停（Pause On Caught Exceptions）选项

需要注意的此选项需要选中断点按钮才会看到

参考链接