2 verschiedene Hintergrundfarben für ScrollView Bounce

Question

Ich habe eine ScrollView, die einen oberen Abschnitt mit einer Hintergrundfarbe und einen unteren Abschnitt mit einer anderen anderen Farbe hat.

Wenn ein Benutzer über den Inhalt scrollt und die Ansicht springt (elastische Überdehnung), wie kann ich den Hintergrund abhängig von der Bildlaufrichtung entweder mit der Ober- oder der Unterseite konsistent machen?

Answer 1

Sie können einen Abstandhalter Auf der Oberseite des Scrollview, übertragen und verwenden contentInset es „off-screen“ zu machen, contentOffset die anfängliche Bildlaufposition, um den Einsatz zu kompensieren:

render() { 
    const SPACER_SIZE = 1000; //arbitrary size 
    const TOP_COLOR = 'white'; 
    const BOTTOM_COLOR = 'papayawhip'; 
    return (
    <ScrollView 
     style={{backgroundColor: BOTTOM_COLOR}} 
     contentContainerStyle={{backgroundColor: TOP_COLOR}} 
     contentInset={{top: -SPACER_SIZE}} 
     contentOffset={{y: SPACER_SIZE}}> 

     <View style={{height: SPACER_SIZE}} /> 
     //...your content here 

    </ScrollView> 
); 
}