Javascript 使用重新激活的redash在Croll上反应本机动画时出现问题

你好，我正在尝试用React Native实现动画。 当我从scrollview向上滚动时，我希望scrollview中的一个子项是buttonContainer淡出。 所以，当我开始向上滚动时，buttonContainer的不透明度可能会从1变为0。 但是，什么都没有发生。 我不完全理解什么是输入范围和输出范围

这里也是

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import { onScroll } from 'react-native-redash';

const { height } = Dimensions.get('window');
const BUTTON_CONTAINER_HEIGHT = height / 1.7;
const { Value, interpolate, Extrapolate } = Animated;

export default class App extends React.Component {
  render() {
    const scrollY = new Value(0);
    const opacity = interpolate(scrollY, {
      inputRange: [BUTTON_CONTAINER_HEIGHT, height - 30],
      outputRange: [1, 0],
      extrapolate: Extrapolate.CLAMP,
    });
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <Animated.ScrollView
            onScroll={onScroll({ scrollY })}
            showVerticalScrollIndicator={false}
            scrollEventThrottle={1}>
            <Animated.View
              style={[styles.buttonContainer, { opacity: opacity }]}>
              <Text>Hello World! </Text>
              <Button title="Click Me!" />
            </Animated.View>
            <View>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
            </View>
          </Animated.ScrollView>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    position: 'relative',
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: BUTTON_CONTAINER_HEIGHT,
    marginBottom: 30,
  },
  textStyle: {
    height: 100,
    fontSize: 24,
    marginTop: 10,
  },
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、维度、按钮}；
从“react native reanimated”导入动画；
从'react native redash'导入{onScroll}；
const{height}=Dimensions.get（'window'）；
常数按钮\容器\高度=高度/1.7；
常量{值，插值，外推}=动画；
导出默认类App扩展React.Component{
render（）{
常量滚动=新值（0）；
常量不透明度=插值（滚动{
输入范围：[按钮\容器\高度，高度-30]，
outputRange:[1,0]，
外推法：外推法，
});
返回(
你好，世界！
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
位置：'相对'，
},
按钮容器：{
弹性：1，
flexDirection:'列'，
justifyContent:“柔性端”，
对齐项目：“居中”，
高度：按钮\容器\高度，
marginBottom:30，
},
文本样式：{
身高：100，
尺寸：24，
玛金托普：10，
},
});

u以错误的方式定义动画值，不要在“渲染方法”中定义值，因为每次组件重新渲染时都会创建这些值，请在构造函数、、、中定义它们，，，， 使用下面的代码

import * as React from 'react';
import {Text, View, StyleSheet, Dimensions, Button} from 'react-native';
import {onScroll} from 'react-native-redash';
import Animated from 'react-native-reanimated';

const {height} = Dimensions.get('window');
const BUTTON_CONTAINER_HEIGHT = height / 1.7;
const {Value, interpolate, Extrapolate} = Animated;

export default class App extends React.Component<{}> {
  constructor(props: Readonly<{}>) {
    super(props);
    this.scrollY = new Value(0);
  }
  render() {
    const {scrollY} = this;
    const opacity = interpolate(scrollY, {
      inputRange: [0, BUTTON_CONTAINER_HEIGHT, height - 30],
      outputRange: [1, 0, 0],
      extrapolate: Extrapolate.CLAMP,
    });
    return (
      <View style={{flex: 1}}>
        <View style={styles.container}>
          <Animated.ScrollView
            onScroll={onScroll({y: scrollY})}
            showsVerticalScrollIndicator={false}
            scrollEventThrottle={1}>
            <Animated.View style={[styles.buttonContainer, {opacity}]}>
              <Text>Hello World! </Text>
              <Button onPress={() => {}} title="Click Me!" />
            </Animated.View>
            <View>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
            </View>
          </Animated.ScrollView>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    position: 'relative',
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: BUTTON_CONTAINER_HEIGHT,
    marginBottom: 30,
  },
  textStyle: {
    height: 100,
    fontSize: 24,
    marginTop: 10,
  },
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、维度、按钮}；
从'react native redash'导入{onScroll}；
从“react native reanimated”导入动画；
const{height}=Dimensions.get（'window'）；
常数按钮\容器\高度=高度/1.7；
常量{值，插值，外推}=动画；
导出默认类App扩展React.Component{
构造函数（道具：只读）{
超级（道具）；
this.scrollY=新值（0）；
}
render（）{
const{scrollY}=这个；
常量不透明度=插值（滚动{
输入范围：[0，按钮\容器\高度，高度-30]，
outputRange:[1,0,0]，
外推法：外推法，
});
返回(
你好，世界！
{}}title=“单击我！”/>
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
位置：'相对'，
},
按钮容器：{
弹性：1，
flexDirection:'列'，
justifyContent:“柔性端”，
对齐项目：“居中”，
高度：按钮\容器\高度，
marginBottom:30，
},
文本样式：{
身高：100，
尺寸：24，
玛金托普：10，
},
});

u以错误的方式定义动画值，不要在“渲染方法”中定义值，因为每次组件重新渲染时都会创建这些值，请在构造函数、、、中定义它们，，，， 使用下面的代码

import * as React from 'react';
import {Text, View, StyleSheet, Dimensions, Button} from 'react-native';
import {onScroll} from 'react-native-redash';
import Animated from 'react-native-reanimated';

const {height} = Dimensions.get('window');
const BUTTON_CONTAINER_HEIGHT = height / 1.7;
const {Value, interpolate, Extrapolate} = Animated;

export default class App extends React.Component<{}> {
  constructor(props: Readonly<{}>) {
    super(props);
    this.scrollY = new Value(0);
  }
  render() {
    const {scrollY} = this;
    const opacity = interpolate(scrollY, {
      inputRange: [0, BUTTON_CONTAINER_HEIGHT, height - 30],
      outputRange: [1, 0, 0],
      extrapolate: Extrapolate.CLAMP,
    });
    return (
      <View style={{flex: 1}}>
        <View style={styles.container}>
          <Animated.ScrollView
            onScroll={onScroll({y: scrollY})}
            showsVerticalScrollIndicator={false}
            scrollEventThrottle={1}>
            <Animated.View style={[styles.buttonContainer, {opacity}]}>
              <Text>Hello World! </Text>
              <Button onPress={() => {}} title="Click Me!" />
            </Animated.View>
            <View>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
              <Text style={styles.textStyle}>This is content</Text>
            </View>
          </Animated.ScrollView>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    position: 'relative',
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: BUTTON_CONTAINER_HEIGHT,
    marginBottom: 30,
  },
  textStyle: {
    height: 100,
    fontSize: 24,
    marginTop: 10,
  },
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、维度、按钮}；
从'react native redash'导入{onScroll}；
从“react native reanimated”导入动画；
const{height}=Dimensions.get（'window'）；
常数按钮\容器\高度=高度/1.7；
常量{值，插值，外推}=动画；
导出默认类App扩展React.Component{
构造函数（道具：只读）{
超级（道具）；
this.scrollY=新值（0）；
}
render（）{
const{scrollY}=这个；
常量不透明度=插值（滚动{
输入范围：[0，按钮\容器\高度，高度-30]，
outputRange:[1,0,0]，
外推法：外推法，
});
返回(
你好，世界！
{}}title=“单击我！”/>
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
这就是内容
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
位置：'相对'，
},
按钮容器：{
弹性：1，
flexDirection:'列'，
justifyContent:“柔性端”，
对齐项目：“居中”，
高度：按钮\容器\高度，
marginBottom:30，
},
文本样式：{
身高：100，
尺寸：24，
玛金托普：10，
},
});

谢谢，它很管用！。但是当我在inputRange和outputRange中只放了两个值时，它就不起作用了。您能解释一下原因吗？输入范围和输出范围需要相同数量的值，因为输入数组中的每个值都对应于输出数组中的相同索引。谢谢，它可以工作！。但是当我在inputRange和outputRange中只放了两个值时，它就不起作用了。您能解释一下原因吗？输入范围和输出范围需要相同数量的值，因为输入数组中的每个值对应于输出数组中的相同索引。