react-native - react native ScrollView : Different Colors for top and bottom

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>

任何帮助表示赞赏，可能可以在底部和顶部设置假 View ，但我不确定如何准确地做到这一点。

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