在本文中，我们将给您介绍关于react-navigation重复点击多次跳转的解决方案的详细内容，并且为您解答react防止重复点击的相关问题，此外，我们还将为您提供关于@react-navigati

在本文中，我们将给您介绍关于react-navigation重复点击多次跳转的解决方案的详细内容，并且为您解答react 防止重复点击的相关问题，此外，我们还将为您提供关于@ react-navigation / native和@ react-navigation / stack读取整个堆栈、@react-navigation/native 和 @react-navigation/stack 应该是我模块的 peerDependencies 或依赖项吗？、initialProps被React-Navigation的navigation属性覆盖解决方案、javascript – undefined不是函数(评估’_reactNavigation.NavigationActions.reset’)的知识。

• react-navigation重复点击多次跳转的解决方案（react 防止重复点击）
• @ react-navigation / native和@ react-navigation / stack读取整个堆栈
• @react-navigation/native 和 @react-navigation/stack 应该是我模块的 peerDependencies 或依赖项吗？
• initialProps被React-Navigation的navigation属性覆盖解决方案
• javascript – undefined不是函数(评估’_reactNavigation.NavigationActions.reset’)

react-navigation重复点击多次跳转的解决方案（react 防止重复点击）

废话

• 在react-native@0.44版本之后，官方废弃了之前的导航Navigator，用react-navigation 替代
• react-natvigation于2017年1月份开源，在3个月时间内，GitHub上star数达4000+，备受推崇，由于其性能体验堪比原生，而且使用方便，最后被FB钦点为“御用导航”
• 但是在使用过程中还是发现了一个问题：在触发页面跳转的View上 重复、快速点击时，即将被加载的页面会多次被加载（感谢测试小姐姐丧心病狂的操作），症状如下图
  

分析问题

经过观察发现，在onPress事件执行后会触发navigation.navigate(...)方法，加载新的页面。
但是当页面加载缓慢时，多余的点击会多次触发该事件，导致页面重复加载
看源码
位置：../node_modules/react-navigation/src/addNavigationHelper.js

...... navigate: ( routeName: string,params?: NavigationParams,action?: NavigationNavigateAction ): boolean => navigation.dispatch( NavigationActions.navigate({ routeName,params,action }) ),.....

显然，页面跳转时，并未对事件进行控制，只要触发，就会加载新的页面

解决方案

既然源码未加控制，我们就手动加上，目前思路有2种
- 普通版 在onPress事件处控制，第一次点击后，加上延时，禁止之后的点击操作，但是需要每个点击事件都添加
- 进阶版 直接修改源码，给navigation.dispatch加延时，一劳永逸

普通版

1. 在constructor中初始化一个记录是否等待的state

constructor(props) { super(props) this.state = { waiting: false,//防止多次重复点击 } }

1. 利用this.state.waiting控制TouchableOpacity的disabled属性

<TouchableOpacity
    disabled={this.state.waiting}
    onPress={() => this.repeatClick(this.props.navigation)}
>
    <Text style={{padding: 10,color: 'red'}}>goto detail page</Text>
</TouchableOpacity>
...
repeatClick(navigation){
    this.setState({waiting: true});
    /*-------这中间写你需要实现的逻辑------------*/
    navigation.navigate('Detail')
    /*-------这中间写你需要实现的逻辑------------*/
    setTimeout(()=> { this.setState({waiting: false}) },3000);//设置的时间间隔根据实际需要 }

1. 效果展示
   

进阶版

1. 修改源码
   位于：../node_modules/react-navigation/src/addNavigationHelper.js
   此次修改基于"react-navigation": "^1.0.0-beta.27"，
   修改后的代码如下：

......
......
export default function<S: {}>(
  navigation: NavigationProp<S>
): NavigationScreenProp<S> {
  /* ------------此处为添加的代码--------- */
  let debounce = true;// 定义判断变量 
  /* ------------此处为添加的代码--------- */
  return {
    ...navigation,goBack: (key?: ?string): boolean => {
      let actualizedKey: ?string = key;
      if (key === undefined && navigation.state.key) {
        invariant(
          typeof navigation.state.key === 'string','key should be a string'
        );
        actualizedKey = navigation.state.key;
      }
      return navigation.dispatch(
        NavigationActions.back({ key: actualizedKey })
      );
    },navigate: (
      routeName: string,params?: NavigationParams,action?: NavigationNavigateAction
  /* ------------此处为修改后的的代码--------- */
    ): boolean =>{
      if (debounce) {
        debounce = false;
        navigation.dispatch(
          NavigationActions.navigate({
            routeName,params,action,}),);
        setTimeout(
          () => {
            debounce = true;
          },5000,);
        return true;
      }
      return false;
    },/* ------------此处为修改后的的代码--------- */
......
......

此时onPress事件无需再加控制

<TouchableOpacity  // disabled={this.state.waiting} onPress={() => this.props.navigation.navigate('Detail')} > <Text style={{padding: 10,color: 'red'}}>goto detail page</Text> </T

1. 看效果
   

本人翻译了 react-navigation的官方文档

地址：https://www.reactnavigation.org.cn/，欢迎访问

本文结束，欢迎大家加群共同学习

QQ群：672509442

@ react-navigation / native和@ react-navigation / stack读取整个堆栈

您可以使用如下所示的useNavigationState钩子来获取当前状态

https://reactnavigation.org/docs/use-navigation-state/

import {useNavigationState} from '@react-navigation/native';

const state = useNavigationState((state) => state);

alert(JSON.stringify(state.routes));

这将在路线中显示屏幕

@react-navigation/native 和 @react-navigation/stack 应该是我模块的 peerDependencies 或依赖项吗？

{
    "@react-native-community/masked-view": "^0.1.10","@react-navigation/native": "^5.9.4","@react-navigation/stack": "^5.14.4","@react-native-community/masked-view": "^0.1.10","env-cmd": "^10.1.0","firebase": "^8.4.1","react-native-gesture-handler": "^1.10.3","react-native-reanimated": "^2.1.0","react-native-safe-area-context": "^3.2.0","react-native-screens": "^3.1.1"
}

const AppWithDebug = createStackNavigator({
  Home: {
    screen: App
  },
  ...debugRoute
});

AppRegistry.registerComponent(appName, () => AppWithDebug);

const AppWithDebug = createStackNavigator({
  Home: {
    screen: App
  },
  ...debugRoute
});

class AppEntry extends Component {
    render() {
      return <AppWithDebug screenProps={ this.props }/>
  }
};

AppRegistry.registerComponent(appName, () => AppEntry);

RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
      moduleName: @"RNHighScores"
initialProperties:
 @{
   @"scores" : @[
     @{
       @"name" : @"Alex",
       @"value": @"42"
      },
     @{
       @"name" : @"Joel",
       @"value": @"10"
     }
   ]
 }
   launchOptions: nil];
注：请忽略我的强行缩进，节省点大家横向拖动的时间

import React from "react";
import { Animated,Easing } from "react-native";
import LottieView from "lottie-react-native";
import { NavigationActions } from "react-navigation";

export default class SplashScreen extends React.Component {
  static navigationoptions = {
    header: null
  };

  constructor() {
    super();
    this.state = {
      progress: new Animated.Value(0),}
  }

  componentDidMount() {
    setTimeout(() => {
      this.navigatetoWalkthrough()
    },3500);
    
    Animated.timing(this.state.progress,{
      tovalue: 1,duration: 3000,easing: Easing.linear,}).start();
  }

  navigatetoWalkthrough = () => {
    const navigateAction = NavigationActions.reset({
      index: 0,actions: [NavigationActions.navigate({ routeName: "Walkthrough" })],});

    this.props.navigation.dispatch(navigateAction);
  }

  render() {
    return(
      <LottieView 
      source={require("../assets/splash/SplashScreenAnimation.json")}
      progress={this.state.progress}
      />
    );
  }
}

undefined is not a function (evaluating'_reactNavigation.NavigationActions.reset')

import React from "react";
import { View,Text } from "react-native";
import { createStackNavigator } from "react-navigation";

import SplashScreen from "./screens/SplashScreen";
import Walkthrough from "./screens/Walkthrough";

const Routes = createStackNavigator({
  Home: {
    screen: SplashScreen
  },Walkthrough: {
    screen: Walkthrough
  }
});

export default class Main extends React.Component {
  render() {
    return <Routes />;
  }
}