reactnative三方框架笔记

三方框架地址：https://js.coach/

1，启动页：react-native-splash-screen

Android全屏问题：使用方法（SplashScreen.show(this, true);）显示为全屏true

2，报错 -Warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-nati...

复现：

Run the application using react-native run-android

目前方案：

安装 react-native-viewpager 详情见 https://github.com/react-nati...

link依赖

修改.node_modules/react-native-swiper/src/index.js中的 ViewPagerAndroid 组件为 ViewPager (别忘了先引用 : import ViewPager from "@react-native-community/viewpager";)

3，ECharts：webview错误：

注释掉index.js中的webview引用，修改useWebKit等于{true}

解决安卓不显示问题

1./node_modules/native-echarts/src/ 目录下的index.html 拷贝一份

2./android／app/src/main 创建 assets文件夹

3.把第一步拷贝的文件放到第二步创建的assets文件夹下

4.进入Echarts文件(/node_modules/native-echarts/src/components/Echarts/index) 把WebView的source改为

source={{uri: 'file:///android_asset/index.html'}}

native-echarts 问题汇总

4，react-native-http-cache:

ios 注释掉libraries/RCTHttpCache.xcodeproj/RCTHttpCache/RCTHttpCache.m中的10、11、12行

Android 修改 HttpCacheModule.java 文件

将69、80行分别改为：

FileCache cache1 = ImagePipelineFactory.getInstance().getMainFileCache();

FileCache cache2 = ImagePipelineFactory.getInstance().getSmallImageFileCache();

5，react-native-google-signin：

报错：androidx冲突

Android 修改 .node_modules/react-native-google-signin/android/buil.d.gradle 文件中：

//implementation "androidx.appcompat:appcompat:1.0.2" 注释掉

6，StackViewStyleInterpolator.forHorizontal转场在Android10上显示错乱、叠影问题：

路径node_modules/react-navigation-stack/src/views/StackView/StackViewStyleInterpolator.tsx中第79行添加：

const opacity = position.interpolate({
     inputRange: [first, first + 0.5, first + 0.9, index, last - 1e-5, last],
     outputRange: [1, 1, 1, 1, 1, 0],
     extrapolate: 'clamp',
});

在return中新增opacity：

return {
    transform: [{ translateX }],
    overlayOpacity,
    shadowOpacity,
    opacity,//新增
};

7，更新node.js报错 TypeError: cb.apply is not a function

查看报错的源码,在node_module/graceful-fs/polyfills.js的285行，看注释应该用来处理旧版本的问题，查看这个方法的调用位置发现在61-63行

把调用的方法注释掉（61~63注释掉）

8，react-native-image-crop-picker

检查引入框架

QBImagePicker.framework;

RSKImageCropper.framework;

9，react-native-webview引入配置：

版本大于6.0需支持Androidx，如果小于7.0需手动删除Xcode中的UIwebview相关引用

10，react-native-camera引入配置：

参考官方文档：react-native-camera配置

- 【检查】android/app/build.gradle

    android {
     ...
     defaultConfig {
       ...
       + missingDimensionStrategy'react-native-camera', 'general' 
     }
    }

11，react-native-actionsheet安卓全屏：

在路径node_modules/react-native-actionsheet/lib/ActionSheetCustom.js中第185添加安卓全屏配置：

<Modal visible={visible}
        animationType='none'
        statusBarTranslucent={true}//安卓全屏
        transparent
        onRequestClose={this._cancel}
      >

因为该项目已经不维护了，也可以使用别人维护的版本来替换该三方库：alessiocancian/react-native-actionsheet

12，引用三方库不维护了，处理方法：

通过GitHub的forks功能，查找其他开发者维护的版本。

示例：打开三方库react-native-http-cache的GitHub地址，可以看到原项目已经多年不维护了，我们点开右侧的forks链接，

可以看到其他开发者维护的版本，然后我们选择最新的那个版本（或者选star多的，具体以源码能解决问题为主），点进去，然后按照步骤安装该forks版本即可。

0，标题：

内容