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

我在

滚动视图中有3个
视图
，如何在向下滚动时使每个
视图向右或向左淡入淡出

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


淡入右视图1
淡入右视图2
淡入右视图3

大概是这样的：
元素在滚动时淡入（）
您可以像这样使用
onScroll
：

<ScrollView onScroll={this.handleScroll} />

使用
contentOffset
、
layoutmasurement
和
contentSize
可以在React Native中重写
 我为您创建了一个小示例，但您当然需要对其进行微调，使其完全符合您的目的

演示


解释

我的示例由两个组件组成。淡入淡出组件和实际的滚动视图。“淡入淡出”组件处理动画。通过滚动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} />
    );
  }
}

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>

类淡入淡出扩展组件{
建造师（道具）{
超级（道具）；
此.state={
可见：道具可见，
可见性：新的动画值（道具可见？1:0），
};
};
组件将接收道具（下一步）{
if（nextrops.visible）{
this.setState（{visible:true}）；
}
动画。计时（this.state.visibility{
toValue:nextrops.visible？1:0，
持续时间：500，
}).start（（）=>{
this.setState（{visible:nextrops.visible}）；
});
}
render（）{
const{style}=this.props；
常量集装箱样式={
不透明度：this.state.visibility.interpolate({
输入范围：[0，1]，
outputRange:[0，1]，
})，//插值不透明度
转换：[
{
translateX:this.state.visibility.interpolate({
输入范围：[0，1]，
输出范围：[-20,0]，
})，//插值translateX以创建左/右淡入
},
],
};
const combinedStyle=[容器样式，样式]；
返回(
);
}
}

滚动查看片段

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

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>

handleScroll（e）{
如果（e.nativeEvent.contentOffset.y>50）{//，则需要微调此值
this.setState（{visible:true}）；
}
}
this.handleScroll（e）}scrollEventThrottle={8}>

我希望我的例子能让您了解如何实现您的预期行为。
请您详细说明实现该目标的条件好吗？