React Native ScrollView：頂部和底部的不同顏色

Question

我想要使用scrollView，當我滾動頂部時，它具有頂部元素（綠色）的背景顏色，當底部彈起時，它具有顏色底部元素（白色）。我不知道我該怎麼做。

<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> 

任何幫助表示讚賞，大概可以設置在底部和頂部的假意見，但我不知道如何做到這一點。

Answer 1

下面是做這件事：

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, 
    }, 
}); 

嘗試直播：https://rnplay.org/apps/5BJASw