react native三方库配置

光阴呢喃

已于 2024-06-16 12:38:48 修改

阅读量945

点赞数

分类专栏： react native 文章标签： react native

于 2023-06-23 19:08:28 首次发布

本文链接：https://blog.csdn.net/weixin_44114524/article/details/131353365

版权

本文详细介绍了如何配置React Native的第三方库，包括react-navigation的相关依赖如react-native-screens, react-native-gesture-handler和react-native-reanimated，以及其他库如react-native-webview, react-native-image-crop-picker, react-native-camera等的iOS和Android平台配置步骤。同时提到了一些已废弃库的替代方案，如react-native-root-siblings和react-native-splash-screen。" 50176719,4956093,虚拟存储器详解与应用,"['操作系统', '内存管理', '虚拟化', '存储技术', '程序设计']

摘要由CSDN通过智能技术生成

1，需要安装这四个依赖：

react-native-screens

react-native-safe-area-context

react-native-gesture-handler

react-native-reanimated@2.17.0 （react-navigation只能用reanimated1或2，3.x偶发报错）

@react-native-community/masked-view（你也可以选择安装@react-native-mask -view/mask -view。如果你想在头部使用UIKit风格的动画(HeaderStyleInterpolators.forUIKit)，这是必需的。）

1、react-native-screens：

参考配置：react-native-screens

1）在android/app/src/main/java/文件项目名/MainActivity.java中加入代码:

import android.os.Bundle;

public class MainActivity extends ReactActivity {

    //...code

    //react-native-screens override
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(null);
    }

    public static class MainActivityDelegate extends ReactActivityDelegate {
        //...code
    }
}

2、react-native-gesture-handler

参考配置：drawer-navigator、react-native-gesture-handler

项目最底层的index.js文件中需要引入：

import 'react-native-gesture-handler';

3、react-native-reanimated

参考配置：react-native-reanimated、react-native-reanimated系列(一)

在项目根目录的 babel.config.js文件中添加配置：

module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',//here
    ],
  };

在项目运行前需先清除缓存：

npm start -- --reset-cache

若出现报警告：类似于‘kotlin在子项目多次引用’，可以先卸载该三方库再重新引入。

二、其他三方库配置：

1、react-native-webview

参考配置：react-native-webview

确保在android/gradle.properties文件中添加有这两行：

android.useAndroidX=true
android.enableJetifier=true

2、react-native-image-crop-picker

参考配置：react-native-image-crop-picker

iOS：

1，在Xcode中打开Info.plist文件添加字符串键NSPhotoLibraryUsageDescription与值，描述为什么你需要访问用户照片。更多信息请访问https://forums.developer.apple.com/thread/62229。根据你使用的特性，你可能还需要NSCameraUsageDescription和NSMicrophoneUsageDescription键。

2，打开你的Xcode项目
通过在导航栏(左侧)上打开项目名称来进入项目设置。
在项目列表中选择您的项目
在Info选项卡中，点击+添加你的app中缺失的本地化语言。
Rebuild，你现在应该有你的应用程序的相机和图库与经典的ios文本在你添加的语言。

3，检查引入框架：QBImagePicker.framework和RSKImageCropper.framework;

Android：

1，在android/build.gradle文件的repositories中添加：

allprojects {
    repositories {
      mavenLocal()
      jcenter()
      maven { url "$rootDir/../node_modules/react-native/android" }

      // ADD THIS
      maven { url 'https://maven.google.com' }

      // ADD THIS
      maven { url "https://www.jitpack.io