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

【问题标题】：React Native ScrollView: Different Colors for top and bottomReact Native ScrollView：顶部和底部的不同颜色
【发布时间】：2016-06-21 15:20:28
【问题描述】：

我想使用一个 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>

感谢任何帮助，可能有人可以在底部和顶部设置假视图，但我不确定如何准确地做到这一点。

【问题讨论】：

标签： react-native react-native-scrollview

【解决方案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

【讨论】：