Question

我在View中有3个ScrollView，如何在向下滚动时向右或向左淡出每个View？

<ScrollView >
  <View>
    <Text>Fade Right View 1</Text>
  </View>

  <View>
    <Text>Fade Right View 2</Text>
  </View>

  <View>
    <Text>Fade Right View 3</Text>
  </View>
</ScrollView >

类似这样的事情：滚动元素淡入（https://codepen.io/annalarson/pen/GesqK）

Answer 1

我为您创建了一个小示例，但是您当然需要对其进行微调以使其完全发挥作用。

演示

说明

我的示例包括两个部分。 Fade组件和实际的ScrollView。淡入淡出组件可处理动画。通过滚动ScrollView触发动画淡入（请参见handleScroll函数）。

渐变组件

class Fade extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: props.visible,
      visibility: new Animated.Value(props.visible ? 1 : 0),
    };
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible) {
      this.setState({ visible: true });
    }
    Animated.timing(this.state.visibility, {
      toValue: nextProps.visible ? 1 : 0,
      duration: 500,
    }).start(() => {
      this.setState({ visible: nextProps.visible });
    });
  }

  render() {
    const { style} = this.props;

    const containerStyle = {
      opacity: this.state.visibility.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      }), // interpolate opacity 
      transform: [
        {
            translateX: this.state.visibility.interpolate({
                inputRange: [0, 1],
                outputRange: [-20, 0],
            }), // interpolate translateX to create a fade in left/right
        },
      ],
    };

    const combinedStyle = [containerStyle, style];
    return (
      <Animated.View style={this.state.visible ? combinedStyle : containerStyle} />
    );
  }
}

ScrollView代码段

handleScroll(e) {
    if (e.nativeEvent.contentOffset.y > 50) { // you need to fine tune this value
      this.setState({ visible: true }); 
    }
  }


<ScrollView onScroll={(e) => this.handleScroll(e) } scrollEventThrottle={8}>
          <View style={{ backgroundColor: 'yellow', height: 200, marginTop: 10 }}/>
          <View style={{ backgroundColor: 'yellow', height: 200, marginTop: 10 }}/>
          <View style={{ backgroundColor: 'yellow', height: 200, marginTop: 10 }}/>
          <Fade style={{ backgroundColor: 'red', height: 200, marginTop: 10 }} visible={this.state.visible} />
</ScrollView>

我希望我的示例可以使您了解如何实现预期的行为。

Answer 2

您可以像这样使用onScroll：

<ScrollView onScroll={this.handleScroll} />

之后：

handleScroll = (event: Object) => {
 console.log(event.nativeEvent);
 // You see {layoutMeasurement, contentOffset, contentSize} in nativeEvent
}

使用contentOffset，layoutMeasurement和contentSize，您可以在React Native中重写https://www.example.com/exampleVideos/stuffs_videos/3323232/?result=33！

在向下滚动时反应本机淡入淡出右/左视图

2 个答案: