Question

我正在尝试让我的Modal向上滑动并在按钮单击时反弹，但是当我将Modal包装到Animated.View组件中时它不起作用。它只是因为 animationType 道具而向上滑动但之后没有任何反应。有什么想法吗？

   //in render() function
   <Animated.View
    style={{
      flex: 1,
      transform: [                        // `transform` is an ordered array
        { scale: this.state.bounceValue },  // Map `bounceValue` to `scale`
      ],
    }}
    >
      <Modal
        animationType={"slide"}
        transparent={true}
        visible={this.state.modalVisible}
      >
       <View style={styles.modalContainer}>
        <View style={styles.modalInnerContainer}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
          />
        </View>
       </View>
      </Modal>
    </Animated.View>


// onPress function
_onSelectFilter(rowID) {
 if (this.state.modalVisible) {
   this.state.bounceValue.setValue(2);
   Animated.spring(
       this.state.bounceValue,
     {
       toValue: 0.8,
       friction: 1,
     }
     ).start();
  }
}

Answer 1

在文档中并不完全清楚，但React Native中的<Modal/>包含在与主React Native容器分开的本机级视图中。这意味着您无法控制它。

如果您需要其他控制权，则需要使用顶级视图，而不是<Modal/>。

如果你的应用很简单，你只需在根级别添加一个绝对定位的视图。

// Modal content goes inside here
<View style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}>
</View>

对于更复杂的应用，您可能希望将其整合到Navigation策略中。

是否可以在React Native中使用Animated动画模态？

1 个答案: