分类
ReactNative

ReactNative小知识

react-native run-ios ios真机运行

安装

npm i -g ios-deploy

查看

xcrun simctl list devices

运行

react-native run-ios –device “‘YooHoh’s iPhone X”

参考链接

ReactNative用指定的真机/模拟器运行项目

分类
ReactNative

ReactNative创建自己的三方库

npm install -g react-native-create-library
react-native-create-library --package-identifier xxx包名 --platforms android,ios 项目名
mv cardview react-native-xxx
npm config get registry

发布

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

更新

npm version patch --registry http://registry.npmjs.org/

 

 

参考链接

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

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

 

分类
ReactNative

ReactNative 0.57.1

react-native init CMBoxRN -package "com.bbs.cmbox"
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`.
react-native start --reset-cache
 unlink node_modules/react-native/scripts/third-party/glog-0.3.5/test-driver

 

分类
ReactNative

ReactNative开发之疑难杂症2

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'"

运行

yarn build:ios

参考链接

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

分类
ReactNative

ReactNative开发之WebView

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文件,加入以下代码

 <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

ReactNative开发之截图保存到手机

rn自身takeSnapshot方法截图只支持iOS平台,需要借助三方开源库
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 => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

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

分类
ReactNative

ReactNative开发之Gradle

查看项目依赖关系

./gradlew -q app:dependencies

参考链接

分类
ReactNative

ReactNative开发之自定义字体

下载需要字体的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);  
    }  
}
分类
ReactNative

ReactNative开发之使用flow

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

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

/*
*flow
*/
分类
ReactNative

ReactNative开发之特殊语法

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

'use strict'

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

import * as obj from "xxx"

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

参考链接