使用Reanimated 2的useSharedValue和useAnimatedStyle实现自定义抽屉导航报错如何解决

崩溃原因 #

你的代码触发JSCRuntime报错是三个核心问题导致的：

1. props.progress是React Navigation自带的RN原生Animated.Value类型，不能直接赋值给Reanimated 2的useSharedValue，类型不匹配会触发运行时错误
2. 你在drawerContent的渲染回调中直接修改共享值，属于渲染过程中同步修改状态，会触发渲染冲突
3. 普通组件无法识别useAnimatedStyle返回的动画样式，需要将Screen1转换为Reanimated的动画组件

修正方案 #

import React, { useEffect, useState } from 'react'
import { Text } from 'react-native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import Animated, { useSharedValue, interpolate, useAnimatedStyle } from 'react-native-reanimated'

import Screen1 from '../screens/screen1'
import Screen2 from '../screens/screen2'
import Screen3 from '../screens/screen3'

// 将普通页面组件转换为可接收动画样式的动画组件
const AnimatedScreen1 = Animated.createAnimatedComponent(Screen1)
const Drawer = createDrawerNavigator()

const DrawerNavigator = () => {
  const [drawerProgress, setDrawerProgress] = useState(null)
  const translateX = useSharedValue(0)

  // 监听抽屉进度变化，同步更新到Reanimated共享值
  useEffect(() => {
    if (!drawerProgress) return
    const listenerId = drawerProgress.addListener(({ value }) => {
      translateX.value = value
    })
    return () => drawerProgress.removeListener(listenerId)
  }, [drawerProgress])

  const animatedStyle = useAnimatedStyle(() => {
    const scale = interpolate(
      translateX.value,
      [0, 1],
      [1, 0.8]
    );
    return{ transform: [{ scale }] }
  })

  return (
    <Drawer.Navigator 
      drawerContent={ (props) => {
        if (!drawerProgress) setDrawerProgress(props.progress)
        return <Text>Hello madan</Text> 
      }} 
    >
      <Drawer.Screen name="screen1">
        {() => <AnimatedScreen1 style={ animatedStyle } />}
      </Drawer.Screen>
      <Drawer.Screen name="screen2" component={ Screen2 } />
      <Drawer.Screen name="screen3" component={ Screen3 } />
    </Drawer.Navigator>
  )
}

内容的提问来源于stack exchange，提问作者Khim Bahadur Gurung