React Native中能否用useState实现视图切换的滑动动画？

你现有基于useState的步骤切换逻辑，想要给视图切换添加滑动动画，下面提供两种可行的实现方式，包括你尝试过的Reanimated方案：

方式一：使用React Native内置Animated库 #

React Native自带的Animated可以轻松和useState结合，通过监听状态变化驱动动画：

修改后的完整代码 #

import { useState, useEffect } from "react"
import { View, Button, Text, StyleSheet, Animated } from 'react-native';

export default function App() {
  const [step, setStep] = useState(0)
  // 创建动画值，初始对应step=0的位置
  const slideAnim = useState(new Animated.Value(0))[0]

  // 监听step变化，触发滑动动画
  useEffect(() => {
    Animated.timing(slideAnim, {
      toValue: step * -100, // 每切换一步，视图向左滑动100%宽度
      duration: 300,
      useNativeDriver: true, // 启用原生驱动提升性能
    }).start()
  }, [step])

  return (
    <View style={{flex: 1, overflow: 'hidden'}}>
      {/* 使用Animated.View包裹所有步骤视图，通过transform实现滑动 */}
      <Animated.View 
        style={{
          flex: 1,
          flexDirection: 'row',
          transform: [{ translateX: slideAnim.interpolate({
            inputRange: [0, 1, 2],
            outputRange: ['0%', '-100%', '-200%'] // 对应每一步的位置
          })}]
        }}
      >
        <View style={style.container}>
          <Text>Step 1</Text>
          <Button title="Next" onPress={() => setStep(1)} />
        </View>
        <View style={style.container}>
          <Text>Step 2</Text>
          <Button title="Next" onPress={() => setStep(2)} />
        </View>
        <View style={style.container}>
          <Text>Step 3</Text>
          <Button title="Next" onPress={() => setStep(3)} />
        </View>
      </Animated.View>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    width: '100%', // 每个步骤视图占满屏幕宽度
  }
})

关键说明 #

• 把所有步骤视图放在横向排列的Animated.View中，通过translateX的动画值控制整体滑动
• 利用useEffect监听step的变化，每次状态更新时启动动画，将滑动值更新到对应位置
• interpolate方法把step的数值转换成百分比位移，实现平滑的滑动过渡

方式二：使用Reanimated结合useState #

如果你想用Reanimated实现，核心是通过useDerivedValue将useState的step状态映射为动画值，再用useAnimatedStyle生成动态样式：

修改后的完整代码 #

import { useState } from "react"
import { View, Button, Text, StyleSheet } from 'react-native';
import Animated, { useDerivedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

export default function App() {
  const [step, setStep] = useState(0)

  // 根据step生成动画值，withTiming实现平滑过渡
  const slideValue = useDerivedValue(() => {
    return withTiming(step * -100, { duration: 300 })
  })

  // 生成动画样式
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: `${slideValue.value}%` }]
    }
  })

  return (
    <View style={{flex: 1, overflow: 'hidden'}}>
      <Animated.View 
        style={[
          {flex: 1, flexDirection: 'row'},
          animatedStyle
        ]}
      >
        <View style={style.container}>
          <Text>Step 1</Text>
          <Button title="Next" onPress={() => setStep(1)} />
        </View>
        <View style={style.container}>
          <Text>Step 2</Text>
          <Button title="Next" onPress={() => setStep(2)} />
        </View>
        <View style={style.container}>
          <Text>Step 3</Text>
          <Button title="Next" onPress={() => setStep(3)} />
        </View>
      </Animated.View>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    width: '100%',
  }
})

关键说明 #

• useDerivedValue会在step变化时自动触发，返回带过渡效果的动画值
• useAnimatedStyle根据动画值生成实时更新的样式，直接作用于Animated.View
• 这种方式完全利用Reanimated的原生动画能力，性能更优，同时和useState的状态管理逻辑解耦

内容的提问来源于stack exchange，提问作者iandev