React Native ScrollView: Verschiedene Farben für oben und unten

Question

Ich möchte eine scrollView verwenden, wenn ich über die Oberseite scrollen, hat es die Hintergrundfarbe des obersten Elements (grün) und wenn es auf der Unterseite springt, hat es die Farbe das untere Element (weiß). Ich bin mir nicht sicher, wie ich das machen kann.

<ScrollView style={{backgroundColor: MColor.WHITE, marginTop: 64, height: Display.height - 64 - 72}}> 
    <View style={{backgroundColor: 'green', height: 200}} /> 
    <View style={{backgroundColor: 'white', height: 800}} /> 
</ScrollView> 

Jede Hilfe ist willkommen, wahrscheinlich kann man gefälschte Ansichten eingestellt am Boden in und an der Spitze, aber ich bin nicht sicher, wie das genau das zu tun.

Answer 1

Hier ist eine Möglichkeit, es zu tun:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    ScrollView, 
    Dimensions, 
} from 'react-native'; 

class MyView extends Component { 
    render() { 
    const fullHeight = Dimensions.get('window').height; 

    return (
     <View style={styles.container}> 
     <ScrollView style={{backgroundColor: 'white', flex: 1}}> 
      <View style={{backgroundColor: 'green', height: fullHeight, position: 'absolute', top: -fullHeight, left: 0, right: 0}} /> 
      <View style={{backgroundColor: 'green', height: 200}} /> 
      <View style={{backgroundColor: 'white', height: 800}} /> 
     </ScrollView> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
}); 

Try it Live: https://rnplay.org/apps/5BJASw