ReactNative | 漂泊80

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）选项

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

参考链接

ReactNative开发之React Developer Tools

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

1.安装

npm install -g react-devtools

1	npm install -g react-devtools

2.运行

react-devtools

1	react-devtools

如果出现如下错误

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

1	Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

删除/react-devtools/node_modules/electron 重新下载

也可以在当前工程下安装

yarn add --dev react-devtools

1	yarn add --dev react-devtools

参考链接

ReactNative开发之获取组件位置

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

1.设置组件ref，如ref=”menu”

<View style={styles.menu} ref="menu"></View>

1	<View style={styles.menu} ref="menu"></View>

2.点击组件时调用this.refs.menu.measure

this.refs.menu.measure((x,y,width,height,pageX,pageY)=>{
console.log(x,y,width,height,pageX,pageY,);
});

this.refs.menu.measure((x,y,width,height,pageX,pageY)=>{

console.log(x,y,width,height,pageX,pageY,);

});

ReactNative开发之特殊样式

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

1.下划虚线

<View style={{borderWidth:1,borderColor:'#d0d0d0',borderStyle : 'dashed'}}></View>

1	<View style={{borderWidth:1,borderColor:'#d0d0d0',borderStyle : 'dashed'}}></View>

2.绝对位置

position:’absolute’ 配合 top:0,bottom:0,left:0,right:0