Animated가있는 Modal을 React Native로 애니메이트 할 수 있습니까?

Question

모달 슬라이드를 위로 올려 버튼 클릭으로 튀어 나오려고하지만 모달을 Animated.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 전략에이를 통합 할 수 있습니다.