1.react-native-vector-icons集成，显示图片显示问题。
要使用字体库的字体，除了执行npm install react-native-vector-icons --save 之外，
1.npm install react-native-vector-icons --save
2.
react-native link react-native-vector-icons
// 或者
npm install -g rnpm
rnpm link react-native-vector-icons
还需要再Android与iOS工程里面进行相应的配置，Android的话需要在 android/app/build.gradle 中添加：apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
如果在android原生应用集成了react native形式，路径为"apply from: "../node_modules/react-native-vector-icons/fonts.gradle",不然检测不到。资料
使用方法：
1.import Icon from "react-native-vector-icons/Ionicons"
Icon图标链接
2.import FontAwesome from "react-native-vector-icons/FontAwesome"
FontAwesome图标链接
3.import EIcon from "react-native-elements/src/icons/Icon";
使用 react _native_elements的图标，使用type,来加载不同类型下的。
elements图标
eg：
2.webstrom设置React native代码模板链接
3.循环遍历，提示Warning: Each child in an array or iterator should have a unique "key" prop. Check the render ...
解决方法：循环的时候加个key={i} 虽然并没啥用，但是必须加
4.react-native-scrollable-view详解是详解
在使用sctollable-view的过程中， renderTabBar={()=>
5.调试技巧参考资料 资料2
工具
6.解决 调试跨域的问题
下载google浏览器跨域插件链接。密码：fxtx
打开更多工具===扩展插件，脱动下载好的插件进行安装，
重新启动浏览器。就没有错误了。正常显示
7.Debug JS Remotely google浏览器提示 无法找到文件
重新安装了下浏览器，就可以了、
8.fetch 中的POST请求传递的请求参数没起作用。
后使用fromData（）形式提交，不需要header,就能请求成功
let formData = new FormData();
formData.append('pid', this.state.pid);
fetch(NET_URL, {
method: 'POST',
body: formData
}).then((response)=>response.json())
.then((responseData)=>{
this.setState({
new_tabs:responseData.data
})
})
.catch((error)=>{
})
这样子就能正常显示了。
9.警告3：调试警告
看下报的警告就知道调试程序在这个窗口导致运行缓慢，所以建议你换一个单独新的窗口进行调试
10.Uncaught SyntaxError: Unexpected token
应该是用法的错误，我遇到过，最后是因为导入的路径的问题。一般是JS代码出错了，要么是样式或者布局不正确引起
11.
image.png
该问题是因为在return 中注释的问题链接
12.Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.
参考： 资料
13.unable to connect with remote debugger Timeout while connecting to remote debugger
,不管是真机还是模拟器都要在setting中设置自己的ip地址 eg:10.1.1.100:8081
10.1.1.100是你的ip地址，在cmd窗口 ipconfig 查看自己的ip地址
14.出现bundling failed: NotFoundError: Cannot find entry file index.android.js in any of the roots
For Android, go to your Module: app’s build.gradle and add the following above the line: apply from: “../../node_modules/react-native/react.gradle”
project.ext.react = [
entryFile: “index.js”
]
In MainApplication.java, you need to override another function in the anonymous ReactNativeHost class by adding this:
@Override
protected String getJSMainModuleName() {
return "index";
}
16. SyntaxError: Unexpected token < in JSON at position 0
使用fetch的get,返回的不是json字符串，导致
17.在react native界面点击物理返回键，把当前的Activity销毁了，React native中的js,没有返回。其实在集成的时候，RN都给我们做好了，只是乱改代码导致错误，还半天没解决到。
书读百遍，其义自见（xian）
感谢文章的小伙伴从Android到React Native开发（二、通信与模块实现）
DefaultHardwareBackBtnHandler
DefaultHardwareBackBtnHandler接口，通过它我们可以整体了解，React Native从android端，到JS端对back按键事件的处理。
首先Activity需要继承DefaultHardwareBackBtnHandler接口。DefaultHardwareBackBtnHandler只有一个invokeDefaultOnBackPressed方法。
ReactInstanceManager在onHostResume(Activity activity, DefaultHardwareBackBtnHandler defaultBackButtonImpl);中需要传入activity和handler接口。
ReactInstanceManager.onBackPressed()会通过DeviceEventManagerModule，向js端发送了"hardwareBackPress"消息。
[热点]React Native对于android back按键，是在onBackPressed中，把所有的back事件都发到js端，如果js端没监听，或者监听都返回了false，那么就会回到继承了DefaultHardwareBackBtnHandler接口，实现了invokeDefaultOnBackPressed的Activity处理。
推荐使用 AppCompatActivity implements DefaultHardwareBackBtnHandler这种方式集成。连接中也给了说法。
@Override
public void invokeDefaultOnBackPressed() {
ToastUtils.showShortToast("js默认返回结束调用执行Activity销毁");//重要
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
ToastUtils.showShortToast("js返回");//重要
} else {
super.onBackPressed();//不会走这里
ToastUtils.showShortToast("ceshi");
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
我都快哭了我..............................
18.
image.png
写成'/reactjs/js/news'会报错，要从根项目.开始
19.react-native-router-flux 根据原生的传值，跳转不同的界面
render() {
let title = this.props.title
let tag_id = this.props.tag_id
return
}
message是向tab组件传值过去，用this.props.message来获取
20.isMounted(...)is deprecated in plain JavaScript React classes解决方法
首先，出现此错误提示的原因是源代码内有已被React舍弃的代码，但此并不影响程序运行。
在index.js 内写入以下代码可屏蔽此提示。
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
21.webstrom上传代码到github
使用WebStorm/IDEA上传本地项目到GitHub
忽略文件
然后在进行提交
SSH Key若果有创建过就不用创建的。
在另外一台电脑上，拉取，然后，就可以两台电脑协同合作。
22. Cannot find module node_modules\react-native\local-cli\cli.js'
npm install ,然后:npm install重新安装以后，配置
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
23.verbose stack SyntaxError: Unexpected end of JSON input while parsing near '...imer-mixin":"^0.13.2"'
从网络上拉去项目，报错，解决
npm -g i npm@4连接
24.Native module VectorIconsModule tried to override VectorIconsModule for module name RNVectorIconsModule. If this was your intention, set canOverrideExistingModule=true
找到MainApplication.java(android/app/src/main/java/com)，里面有有重复的引用，把重复的部分删除就行了
25.React Native Undefined is not an object(evaluating ‘_react2.PropTypes.func’)
import React, { Component, PropTypes } from 'react';失效应该用下面的写法。
import React, { Component } from 'react';
import PropTypes from 'prop-types';
把PropTypes 从prop-types 中引入
26.使用react-native-swiper,从网络加载数据，圆点不滚动，停留在第一个。图片数量错乱
添加key.参考资料
27 xx is invalid;it must be a function, usually from the 'prop-type' package,but received 'string'
28.在使用react-native-scrollable-tab-view+flatlist实现功能的时候，用了scrollview包裹了list,这让我犯了很大的错误。浪费了很多的时间
上面是正确的写法。
29,react native使用mobx , can't find variable:Symbol
链接
- 把mobx降版本到 4.3.1 . mobx-react降版本到 5.1.0 即可.或者
- 在.babelrc配置文件 增加 ployfill插件 "babel-plugin-transform-runtime"即可
{
"presets": [
"react-native"
],
"plugins": [
"transform-decorators-legacy",
"babel-plugin-transform-runtime"
]
}
30,There are multiple mobx instances active. This might lead to unexpected results
31.react native 删除第三方库，删干净那种。。。
链接
首先需要删除在RN的package.json中的依赖，输入一下命令：
npm uninstall --save react-native-video，
如果是组件作为devDependencies，需要加上-D，
如果是从optionalDependencies中删除，还需要加上-o的参数，
我为了保险能删干净，直接输入一下命令：
npm uninstall -s -D -O 组件名
32.npm 安装第三方库的指定的版本
npm install --save 库名@2.8.1
或者yarn add [package]@[version]
32 Java HotSpot(TM) Client VM warning: ignoring option MaxPermSize=512m; support was removed in 8.0
这个直接用webstrom运行android产生的，后面直接用了android studio来直接运行，就略过了这个问题，不在消耗时间来解决他了
33.第一次运行react-native start 提示throw er; // Unhandled 'error' event
原因端口被占了。
参考资料资料
34.react-native项目删除node_module文件夹，重新加载
yarn install
35 Debug模式下View config not found for name RCTView
不调试的时候，是可以运行的。
出现这种错误是因为在React 中，组件的名字必须是大写字母开头，
36.java.lang.RuntimeException: Tried to access a JS module before the React instance was fully set up. Calls to ReactContext#getJSModule should only happen once initialize() has been called on your native module.
37 Module AppRegistry is not a registered callable module(calling runApplication)
Module AppRegistry is not a registered callable module (calling runApplication)
原因:卸载了三方库，运行，但是此时出入热加载模式，注册重复，关闭热加载就行了
参考文章文章
38 解决React Native的Image组件中不更新图片的问题，采用base64显示
情景：使用百度云拍照识别数字返回给RN,每次携带的image_url都是一个地址，而rn中的image组件对相同的地址是有缓存的，所有拍照之后，一直都是显示的第一张，所以在android端把实际地址转成base64,传到RN，让RN读取base64的，就能实现啦
部分代码：
android中设置
public static String imageToBase64() {
String path=Environment.getExternalStorageDirectory()+ "/shuiwu_pic/"+ "water.jpg";
if (TextUtils.isEmpty(path)) {
return null;
}
InputStream is = null;
byte[] data;
String result = null;
try {
is = new FileInputStream(path);
//创建一个字符流大小的数组。
data = new byte[is.available()];
//写入数组
is.read(data);
//用默认的编码格式进行编码
result = Base64.encodeToString(data, Base64.DEFAULT);
} catch (IOException e) {
e.printStackTrace();
} finally {
if (null != is) {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return result;
}
获取base64字符串
onScanningResult = (result) => {
let baseImg=`data:image/png;base64,${result.image_url}`;
this.setState({
image_url:baseImg,
real_num: result.result === "识别失败" ? "0" : result.result
})
}
。。。
}
39, react-native 传base64到七牛
let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if(xhr.readyState===4&&xhr.status===200)
{
let res=JSON.parse(xhr.responseText)
console.log("filekey"+res.key)
}
}
xhr.open("post","http://upload.qiniup.com/putb64/-1/",true)
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken " + 你从服务器获取的token);
xhr.send(this.state.image_base64)
40，react-native webview中图片以宽度自适应
let reg= new RegExp("
{
return ![]()
);
41.react-native android 打包 出现问题
删除自动生成的drawable目录下的文件
参考资料
42，react-native-router-flux 下点击android返回键2秒内推出
return {
console.log(Actions.state)
if(Actions.state.index===0) {
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
//最近2秒内按过back键，可以退出应用。
// return false;
BackHandler.exitApp();//直接退出APP
}else{
this.lastBackPressed = Date.now();
ToastAndroid.show('再按一次退出应用', 1000);//提示
return true;
}
}
}}>
43，react-native 上传图片或者文件到七牛
1.上传base64位图片到七牛，核心代码
var url = "http://upload.qiniup.com/putb64/-1/";
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken " + this.state.qiniu_token);
xhr.send(pic);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
//自己的逻辑
let res = JSON.parse(xhr.responseText)
let file_key = this.state.img_header + res.key
var img_arr = this.state.select_img_urls
img_arr.push({'url': file_key})
var img_keys = this.state.select_img_keys
img_keys.push(res.key)
this.setState({
select_img_urls: img_arr,
select_img_keys: img_keys,
})
EasyLoading.dismiss()
console.log('选取图片数组select_img_urls1', this.state.select_img_urls)
return file_key
} else {
}
}
原生js方式上传文件[视频]到七牛，
参考文章：文章
let realpath="file://"+path
console.log("绝对路径",realpath)
let names=path.split("/")
let name_key=names[names.length-1]
console.log("名称",name_key)
let formData=new FormData()
formData.append("file",{uri:realpath,type:"application/octet-stream",name:name_key})
// formData.append("key",name_key),不设置，服务器会随机生成hash值
formData.append("token",this.state.qiniu_token)
let options={}
options.body=formData
options.method="POST"
console.log("上传的参数",JSON.stringify(formData))
fetch("http://upload.qiniup.com/",options)
.then(response => response.json())
.then(res=>{
console.log("成功",res)
res.filename=name_key
}).catch((e)=>{
console.log("异常",e.toString())
})
注意：这样传到七牛，七牛返回的文件名是没有中文的，可以自己在拿到的结果中处理
44 warnOnce could not be found within the project
45 cli-platform-android/native_modules.gradle找不到指定的路径
androidstudio中直接删除
46 react-native webview与react-native通信
情景再现：webview中有多张图片，点击某张图片，就能查看大图。结合react-native-image-zoom-viewer库查看大图
在webview核心代码
render() {
let reg= new RegExp("
${this.state.content.replace(reg,"![]()
(function hhh(text) {
let hideButon= document.getElementById('btn')
let images= document.getElementsByTagName("img")
hideButon.innerHTML=images.length;
let imgarr=[]
for (let i=0;i
`
const {imgs,index} = this.state
let arr = []
imgs.map((item) => {
let dic = {url:item}
arr.push(dic)
})
return (
{ this.webview = webview; } }
bounces={false}
scalesPageToFit={true}
renderError={
()=>{
return
{
this.setState({
is_show:false
});
}} imageUrls={arr} index={index} />
);
}
}
function hhh是立即执行函数，使用来绑定触发。
window.ReactNativeWebView.postMessage(JSON.stringify(data));来传递参数
onMessage={(e) => {
console.log("接收",e.nativeEvent.data)
let arr = JSON.parse(e.nativeEvent.data).item
let arr_index=JSON.parse(e.nativeEvent.data).index
this.setState({
imgs: arr,
index:arr_index,
is_show:true,
})
}}
webview中接收参数
注意
const {imgs,index} = this.state
let arr = []
imgs.map((item) => {
let dic = {url:item}
arr.push(dic)
})
如果在model中直接使用this.state.imgs和this.state.index是访问不了的,有问题，所有使用上面的代码进行传递
47 React Native——嵌套WebView中的返回处理
连接感谢
情景再现，详情使用react-native-webview的控件的webview加载一个url.这个网页能一层一层的点击，但是返回的话，一下就整个界面就返回出去了，所以，。。。
核心代码
监听返回键
componentDidMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
//android自带返回键
onBackAndroid = () => {
if (this.state.backButtonEnabled) {
this.webview.goBack();
return true;
} else {
Actions.pop()
return true;
}
}
componentWillUnmount(): void {
if (Platform.OS === 'android') {
this.listenter.remove()
}
}
自定义返回键
_left_button() {
return {
if (this.state.backButtonEnabled) {
this.webview.goBack();
return true;
} else {
Actions.pop()
return true;
}
}
}> ;
}
....
onNavigationStateChange = navState => {
this.setState({
backButtonEnabled: navState.canGoBack
});
};
....
{ this.webview = webview; } }
javaScriptEnabled={true}
// onLoadEnd={this.pageOnLoaded.bind(this)}
onNavigationStateChange={this.onNavigationStateChange}
/>
注意:需要解绑，别忘了，不然退出不了app,
48 viewpagerAndroid is error in the reactnative0.61
1.yarn add @react-native-community/viewpager
- react-native link @react-native-community/viewpager
- 在源码中
react-native-scrollable-tab-view/index.js
const ViewPagerAndroid = require('@react-native-community/viewpager')