1

こんにちは、React Native でアニメーションを実装しようとしています。スクロールビューから上にスクロールすると、スクロールビューの子の1つである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,
  },
});
4

1 に答える 1

3

アニメーション化された値を間違った方法で定義しています。コンポーネントが再レンダリングされるたびに値が作成されるため、render メソッドで値を定義しないでください。代わりに、コンストラクターで定義してください。

以下のコードを使用します。

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,
  },
});
于 2020-03-05T04:43:11.560 に答える