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"
  • 相关阅读:
    js之自定义鼠标右键菜单
    js之键盘控制div移动
    js之select标签---省市联动小例子
    html之浮动和定位
    java开发简单的用户管理系统
    ASP.NET Web API 2中的属性路由(Attribute Routing)
    ASP.NET Web API中的路由
    Web API 2中的操作结果
    WebApi~通过HttpClient来调用Web Api接口
    Quartz.NET 作业调度
  • 原文地址:https://www.cnblogs.com/dch0/p/13357802.html
Copyright © 2011-2022 走看看