react-native - React Native ScrollView：顶部和底部的不同颜色

Question

我想使用一个滚动视图，当我在顶部滚动时，它具有顶部元素的背景颜色（绿色），当它在底部反弹时，它具有底部元素的颜色（白色）。我不确定我该怎么做。

<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