时间戳

首页 > 解决方案 > 在 IOS 模拟器中将可见设置为 false 时 React Native 模态闪烁？

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

问题描述

当将可见模式设置为 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

解决方案

将这些道具添加到您的 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>

推荐阅读