React Native开发：drawerContent的props.progress返回undefined问题求助

看起来你遇到的问题大概率是React Navigation版本差异导致的——很多旧教程用的是React Navigation 5.x，而在6.x版本里，drawerContent的props中已经不再直接提供progress这个动画值了，这就是为什么你拿到的是undefined。

正确的解决方案（React Navigation 6.x） #

官方在6.x版本里推荐使用useDrawerProgress钩子来获取抽屉的动画进度，直接替换你之前的useState和setTimeout逻辑就可以了：

1. 首先导入这个钩子：

import { useDrawerProgress } from '@react-navigation/drawer';

2. 修改你的组件代码，去掉不必要的state和timeout，直接用钩子获取progress：

const DrawerNavigator = ({route}) =>{
  // 直接用useDrawerProgress获取抽屉动画进度，它本身就是Animated.Value类型
  const progress = useDrawerProgress();

  const scale = Animated.interpolateNode(progress,{
    inputRange : [0,1],
    outputRange : [0,0.8]
  })
  const borderRadius = Animated.interpolateNode(progress,{
    inputRange : [0,1],
    outputRange : [0,25]
  })
  const animatedStyle = {transform:[{scale}]}
  
  return(
    <View style = {styles.mainContainer}>
      <Drawer.Navigator
        initialRouteName = "FableReader"
        screenOptions={{
          headerShown: false,
          drawerStyle : [styles.drawerContainer],
          drawerType : "slide",
          overlayColor : "transparent",
          sceneContainerStyle : [styles.sceneContainer],
        }}
        drawerContent = {()=>{
          // 这里不需要再处理progress了，直接传递需要的props给CustomContent
          return(
            <CustomContent route={route} />
          )
        }}
      >
        <Drawer.Screen name="FableReader">{props => <FableReaderScreen {...props}/>}</Drawer.Screen>
        <Drawer.Screen name="LexiqueFable">{props => <LexiqueScreen {...props}/>}</Drawer.Screen>
        <Drawer.Screen name="QCM">{props => <QCMScreen {...props}/>}</Drawer.Screen>
      </Drawer.Navigator>
    </View>
  )
}

为什么之前的方法失效？ #

• 在React Navigation 6.x中，drawerContent的props结构发生了变化，不再包含progress属性，官方把这个功能抽成了独立的钩子useDrawerProgress，让代码更清晰。
• 你之前用setTimeout来更新state的方式本身就不稳定：动画值是实时变化的，setTimeout只能执行一次，无法跟踪progress的动态更新，而且把Animated.Value存到React state里也不是正确的用法。

如果你还在使用React Navigation 5.x #

如果你的项目还停留在5.x版本，那问题可能出在解构props的方式上——你需要明确从drawerContent的props中解构出progress，而不是用...props然后再去取：

drawerContent = ({progress, ...restProps})=>{
  // 这里可以直接使用progress，不需要setTimeout
  setProgress(progress);
  return(
    <CustomContent {...restProps} route={route} />
  )
}

不过还是建议升级到最新的6.x版本，享受更好的API设计和性能优化。

内容的提问来源于stack exchange，提问作者théau zatti