2016-08-10 17 views
2

Ich versuche, meinen Modal nach oben zu schieben und auf Knopfdruck zu springen, aber es funktioniert nicht, wenn ich das Modal in eine Animated.View-Komponente hülle. Es rutscht nur wegen der animationType Prop, aber danach passiert nichts. Irgendwelche Ideen?Kann man ein Modal mit Animated in React Native animieren?

//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(); 
    } 
} 

Antwort

1

Es ist nicht ganz in der Dokumentation klar, aber <Modal/> in React Mutter in einer nativen Ebene Ansicht getrennt von Ihrem Hauptmutter Behälter Reagieren enthalten ist. Dies bedeutet, dass Sie nicht viel Kontrolle darüber haben.

Wenn Sie zusätzliche Kontrolle benötigen, müssen Sie eine Ansicht auf oberster Ebene und nicht <Modal/> verwenden.

Wenn Ihre App einfach ist, können Sie einfach eine Ansicht mit absoluter Positionierung auf der Stammebene hinzufügen.

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

Bei komplexeren Anwendungen, könnten Sie diese in Ihre Navigation Strategie integrieren möchten.

+0

Ich habe ein anderes 3rd-Party-Modul gefunden, das komplett JS (react-native-modalbox) ist und es ist ziemlich anpassbar! – damir46

Verwandte Themen