"Error: Too many re-renders" when using navigationEvents in react-native?

Question

以下代码在 modalVisible 为真时呈现模态框。我的计划是每次都将 modal visible 设置为 true，显示屏幕。我想使用 navigationEvents onDidBlur 来做到这一点。

我的代码是这样的：

import React, { useState } from "react";
import { Modal, StyleSheet, Text, Pressable, View } from "react-native";
import GestureRecognizer from 'react-native-swipe-gestures';
import { NavigationEvents } from 'react-navigation'

const CreationScreen = ({navigation}) => {
  const [modalVisible, setModalVisible] = useState(true);

return (
    <View style={styles.centeredView}>
      <NavigationEvents
    onDidBlur={setModalVisible(true)}
    />
      <GestureRecognizer onSwipeDown={ () => setModalVisible(false) }>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
      >
        <View style={styles.modalContainer}>
          <Pressable style={styles.aboveModalView} onPress={() => {setModalVisible(false)}} />
          <View style={styles.modalView}>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => {navigation.navigate('camera'), setModalVisible(false)}}
            >
              <Text style={styles.textStyle}>Camera</Text>
            </Pressable>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => {navigation.navigate('cameraRoll'), setModalVisible(false)}}
            >
              <Text style={styles.textStyle}>Upload from Gallery</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      </GestureRecognizer>
    </View>
  );
};

现在每次进入屏幕时，我都会收到错误消息：

错误：重新呈现的次数过多。 React 限制渲染次数以防止无限循环。

我还尝试了不同的导航事件，例如onWillBlur 等，但它给出了同样的错误。

有谁知道为什么会这样？顺便说一句，我正在使用 react-navigation v4

Answer 1

我用 withNavigation 解决了这个问题:

import React, { useState } from "react";
import { Modal, StyleSheet, Text, Pressable, View } from "react-native";
import GestureRecognizer from 'react-native-swipe-gestures';
import { withNavigation } from 'react-navigation'

const CreationScreen = ({navigation, props}) => {
  const [modalVisible, setModalVisible] = useState(true);

   navigation.addListener('didFocus', () => {
      setModalVisible(true)
    });

  return (
    <View style={styles.centeredView}>
      <GestureRecognizer onSwipeDown={ () => setModalVisible(false) }>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
      >
        <View style={styles.modalContainer}>
          <Pressable style={styles.aboveModalView} onPress={() => {setModalVisible(false), navigation.navigate('feed')}} />
          <View style={styles.modalView}>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => {navigation.navigate('camera'), setModalVisible(false)}}
            >
              <Text style={styles.textStyle}>Camera</Text>
            </Pressable>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => {navigation.navigate('cameraRoll'), setModalVisible(false)}}
            >
              <Text style={styles.textStyle}>Upload from Gallery</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      </GestureRecognizer>
    </View>
  );
};

"Error: Too many re-renders" when using navigationEvents in react-native?

"Error: Too many re-renders" when using navigationEvents in react-native?

react-native

react-navigation

react-hooks