在React Native中使用Animated可以实现Modal动画效果吗？

Question

在React Native中使用Animated可以实现Modal动画效果吗？

javascriptiosanimationreactjsreact-native

3

我试图使我的模态框在按钮点击后向上滑动并弹跳，但是当我将模态框包装成一个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();
  }
}

- damir46

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jpoliachik · Accepted Answer

文档中并不是很清楚，但在React Native中，<Modal/>被包含在一个与主React Native容器分离的本地视图中。这意味着您无法对其进行太多控制。

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

如果您的应用程序很简单，您可以在根级别添加绝对定位的视图。

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

对于更复杂的应用程序，您可能希望将此集成到您的导航策略中。