zoukankan      html  css  js  c++  java
  • 使用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"
  • 相关阅读:
    if __name__ == '__main__' 用法理解
    VSCode 使用
    sys.argv用法简介
    [Python3] RSA的加解密和签名/验签实现 -- 使用pycrytodome
    python requests 超时与重试
    collections模块之defaultdict()与namedtuple()方法简单介绍
    setdefault函数的用法及理解
    python并发编程之IO模型 同步 异步 阻塞 非阻塞
    django+uWSGI+nginx的工作原理流程与部署过程
    Nginx静态服务配置---详解root和alias指令
  • 原文地址:https://www.cnblogs.com/dch0/p/13357802.html
Copyright © 2011-2022 走看看