react-native(六)第三方组件的常见问题及解决方案

react-native-wechat

可能出现的问题

登录、支付回调无反应

请检查你的 android/app/src/main/java 目录下的文件层级
请使得 android/app/build.gradle 的 applicationId 的层级保持一致

示例 android/app/src/main/java 文件目录

其中 applicationId 为 com.hlzblog.app

└─com
  └─hlzblog
    └─app
        --- MainActivity.java
        --- MainApplication.java
      └─wxapi   // 微信目录
          --- WXEntryActivity.java
          --- WXPayEntryActivity.java

如果你通过 react init 项目名（假设这项目名为test） ，来初始化项目，不正确的话
请通过相关工具，将 android 目录下 所有原来的 com.test 变成 com.hlzblog.app
而且需要设置APP入口中的

AppRegistry.registerComponent('hlzblog.app', () => 某个继承了Component的组件 );

react-native-echarts

release版图片不显示

修改 node_modules/native-echarts/src/components/Echarts/index.js 中的代码
android 把 tpl.html 文件放在 android/app/src/main/assets 文件里
webview引入资源的地址，改为这里的source

import { Platform } from 'react-native';
const source = (Platform.OS == 'ios') ? require('./tpl.html') : {'uri':'file:///android_asset/tpl.html'};

react-navigation

与webview进行通信时报错

webview的onMessage，处理逻辑中如果使用来自 window.postMessage 的数据当作路由名
则会报下面的错误

Cannot read property 'setNativeProps' of undefined react-native

对于路由跳转，我们使用写死的路由名则可解决这个问题

this.props.navigation.navigate('写死的路由名')