Возможно ли анимировать Модаль с анимированными в Реальном Роде?

Question

Я пытаюсь сделать мой Модальный слайд вверх и отскакивать при нажатии кнопки, но он не работает, когда я обертываю Modal в компонент 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 контейнера. Это означает, что у вас нет большого контроля над этим.

Если вам нужен дополнительный контроль, вам нужно будет использовать вид верхнего уровня, а не <Modal/>.

Если ваше приложение прост, вы можете просто добавить представление с абсолютным позиционированием на корневом уровне.

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

С более сложными приложениями, вы можете интегрировать это в вашу стратегию Navigation.