Animated with Modified with React Nativeをアニメーション化することは可能ですか？

Question

モーダルのスライドを上にしてボタンのクリックでバウンスしようとしていますが、Animal.Viewコンポーネントにモーダルをラップすると機能しません。 のアニメーションタイプのためにスライドするだけですが、その後は何も起こりません。何か案は？

//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/>はネイティブがあなたの主なネイティブコンテナを反応させるのとは別のネイティブレベルのビューに含まれて反応します。これはあなたがそれをあまり支配していないことを意味します。

追加のコントロールが必要な場合は、<Modal/>ではなくトップレベルのビューを使用する必要があります。

アプリがシンプルな場合は、ルートレベルに絶対配置のビューを追加するだけです。

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

さらに複雑なアプリケーションの場合は、これをあなたのNavigation戦略に統合することができます。