javascript - 是否可以在 React Native 中使用 Animated 为 Modal 设置动画？

Question

我试图让我的模态框向上滑动并在单击按钮时反弹，但是当我将模态框包装到 Animated.View 组件中时它不起作用。它只是因为 animationType Prop 而向上滑动，但之后什么也没有发生。有什么想法吗？

   //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

文档中并不完全清楚，但是 <Modal/>在 React Native 中，它包含在与主 React Native 容器分开的 native 级 View 中。这意味着您对其没有太多控制权。

如果您需要额外的控制，您需要使用顶层 View 而不是 <Modal/> .

如果您的应用很简单，您可以简单地在根级别添加一个具有绝对定位的 View 。

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

对于更复杂的应用程序，您可能希望将其集成到您的 Navigation 中战略。