react-native - 反应相互影响的原生动画组件

Question

语境：

我有一个名为的组件AnimatedSlider，它在App.js.

AnimatedSlider用于React.Animated为其中 a 的宽度设置动画View。这是代码。

AnimatedSlider.js

import React, { useRef } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableWithoutFeedback,
  Animated,
  Easing,
} from 'react-native';

const { Value } = Animated;

const MENU_ITEM_WIDTH = 50;
const MENU_ITEM_FINAL_WIDTH = 200;
const sliderWidthAnimatedValue = new Value(MENU_ITEM_WIDTH);

export default function AnimatedSlider() {
  const sliderState = useRef(-1);

  const animateExpantion = () => {
    Animated.timing(sliderWidthAnimatedValue, {
      toValue: MENU_ITEM_FINAL_WIDTH,
      duration: 250,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();
  };

  const animateCollapse = () => {
    Animated.timing(sliderWidthAnimatedValue, {
      toValue: MENU_ITEM_WIDTH,
      duration: 250,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();
  };

  const animateSlider = () => {
    if (sliderState.current === -1) {
      animateExpantion();
      sliderState.current = 1;
    } else {
      animateCollapse();
      sliderState.current = -1;
    }
  };

  return (
    <View style={styles.container}>
      <Text>Label</Text>
      <TouchableWithoutFeedback onPress={animateSlider}>
        <Animated.View
          style={[styles.slidingMenu, { width: sliderWidthAnimatedValue }]}
        />
      </TouchableWithoutFeedback>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 50,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 24,
    marginBottom: 10,
    backgroundColor: 'grey',
  },
  slidingMenu: {
    height: '100%',
    width: MENU_ITEM_WIDTH,
    backgroundColor: 'pink',
  },
});

App.js

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import AnimatedSlider from './components/AnimatedSlider';

export default function App() {
  return (
    <View style={styles.container}>
        <AnimatedSlider menuColor='pink'/>
        <AnimatedSlider menuColor='pink'/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

问题：单击一个组件似乎也会为另一个组件设置动画。

你可以看看这里的小吃

标签： react-nativereact-animated

Answer 1

问题在于下一行的位置。

const sliderWidthAnimatedValue = new Value(MENU_ITEM_WIDTH);

在组件内移动它解决了这个问题。原因是实例，Value因此slideWidthAnimatedValue在组件实例之间共享AniatedSlider。