在 IOS 模拟器中将可见设置为 false 时 React Native 模态闪烁？答案

【问题标题】：React Native modal flashes when set visible to false in IOS simulator?在 IOS 模拟器中将可见设置为 false 时 React Native 模态闪烁？
【发布时间】：2021-03-04 08:41:52
【问题描述】：

当将可见模式设置为 false 时，模式会闪烁，尤其是在 <Animated.view> 组件上时，我遇到了问题。我已经尝试了这个 github 问题（https://github.com/react-native-modal/react-native-modal/issues/268）的所有解决方案，但没有人解决我的问题。此问题仅在 IOS 模拟器中发生，但在 android 模拟器中按预期工作。

这是我的模态代码

<Modal
        animated
        animationIn="fadeIn"
        animationOut="fadeOut"
        backdropTransitionOutTiming={0}
        visible={visible}
        transparent
        onRequestClose={handleDismiss}>
        <View style={styles.overlay}>
            {this.renderOutsideTouchable()}
            <Animated.View
            style={{
                ...styles.container,
                transform: [{translateY: translateY}],
            }}
            >
                {this.renderTitle()}
                {this.renderContent()}
                {this.renderButton()}
            </Animated.View>
        </View>
        </Modal>

有没有人遇到同样的问题并解决了？

【问题讨论】：

标签： react-native

【解决方案1】：

将这些道具添加到您的 Modal。它应该可以解决闪烁问题。我就是这样解决的。

backdropTransitionOutTiming={0}
hideModalContentWhileAnimating

这是我的设置，两边都没有闪烁。

   <Modal
      onBackdropPress={toggleModal}
      backdropColor="#344356"
      backdropOpacity={0.7}
      animationIn="fadeIn"
      isVisible={isModalVisible}
      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
      backdropTransitionOutTiming={0}
      hideModalContentWhileAnimating
      statusBarTranslucent
    >
      {children}
    </Modal>

【讨论】：

我添加了我的模态设置。检查它是否适合您。

【解决方案2】：

设置

backdropTransitionOutTiming={0}

解决了这个问题。它对我来说根本不影响动画。

【讨论】：