• 使用reactnavigation5.x(RN0.6以上版本)


    1.安装

    #安装核心库
    npm install @react-navigation/native
    or
    yarn add @react-navigation/native


    #依赖库
    npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
    or
    yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

    2.原生部分配置

    2.1. IOS

    cd ios
    pod install

    2.2. Android

    修改 android/app/build.gradle 

    dependencies {
        ...
        implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
        implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
        ...
    }

    配置react-native-gesture-handler,修改 MainActivity.java 

    package com.swmansion.gesturehandler.react.example;
    
    import com.facebook.react.ReactActivity;
    + import com.facebook.react.ReactActivityDelegate;
    + import com.facebook.react.ReactRootView;
    + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
    public class MainActivity extends ReactActivity {
    
      @Override
      protected String getMainComponentName() {
        return "Example";
      }
    +  @Override
    +  protected ReactActivityDelegate createReactActivityDelegate() {
    +    return new ReactActivityDelegate(this, getMainComponentName()) {
    +      @Override
    +      protected ReactRootView createRootView() {
    +       return new RNGestureHandlerEnabledRootView(MainActivity.this);
    +      }
    +    };
    +  }
    }

    3.JS部分配置

    修改 index.js 添加(如果跳过这一步可能会导致线上环境闪退)

    #官方文档说必须加在第一行,你们看着办
    import 'react-native-gesture-handler';

    4.编译运行

    分别执行react-native run-android 和 react-native run-ios,如果编译打包通过,说明配置成功。

    要使用某个导航器,还需要安装并引入对应导航器的依赖

    本人测试时依赖的版本:

    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.7.1",
    "@react-navigation/stack": "^5.7.1",
    "babel-plugin-module-resolver": "^4.0.0",
    "react": "16.13.1",
    "react-native": "0.63.0",
    "react-native-config": "^1.3.1",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.1.1",
    "react-native-screens": "^2.9.0"
  • 相关阅读:
    memcached连接说明
    在win下启动memcached
    Memcached 查看帮助
    HTTP请求信息和响应信息的格式
    购买服务器配置带宽算法
    PHP删除数组指定下标的值
    tp5 验证器使用
    tp5 验证码功能实现
    layui 关闭当前窗口,刷新父级页面
    layui icon样式1到7
  • 原文地址:https://www.cnblogs.com/dch0/p/13357802.html
Copyright © 2020-2023  润新知