Reactjs React Native-使用useRef的钩子调用无效

我试图在React Native中的一个组件中使用useRef（），但我一直得到

组件异常：钩子调用无效。只能调用钩子 功能组件主体的内部

我的组成部分：

import React, { createRef, useRef } from 'react';
import { Animated, View } from 'react-native';

const BottomTabMenu: React.FC = ({ navigation, state: { routeNames } }) => {

  const xPosition = useRef(new Animated.Value(0)).current;


  return (
    <Container>

      <Animated.View style={{ 
          position: 'absolute', left: 37, top: 32,
          transform: [
            {
              translateX: xPosition
            }
          ]
       }}>
        <LinearGradient
          start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
          colors={['#FF151B', '#AA0089']}
          style={{
            height: 40, width: 50, borderRadius: 20 }}>
        </LinearGradient>
      </Animated.View>


      <BottomTabMenuItem icon={require('../assets/performance.png')} title="Performance" onPress={() => navigation.navigate('Performance')} />
      <BottomTabMenuItem icon={require('../assets/wallet.png')} title="Carteira" onPress={() => navigation.navigate('Wallet')} />
      <BottomTabMenuItem icon={require('../assets/transactions.png')} title="Extrato" onPress={() => navigation.navigate('Transactions')} />
      <BottomTabMenuItem icon={require('../assets/settings.png')} title="Ajustes" onPress={() => navigation.navigate('Settings')} />

    </Container>
  )
}

import React，{createRef，useRef}来自“React”；
从“react native”导入{Animated，View}；
const BottomTabMenu:React.FC=（{导航，状态：{routeNames}}）=>{
const xPosition=useRef（新的动画.Value（0））.current；
返回(
navigation.navigate（'Performance'）}/>
导航。导航（'Wallet'）}/>
navigation.navigate（'Transactions'）}/>
导航。导航（'Settings'）}/>
)
}

我在其他组件中使用了useRef，没有任何问题。。这是一个特别的底部标签

---

非常感谢您的帮助

尝试执行以下操作：

  const xPosition = React.useRef<HTMLElement | null>( new Animated.Value(0)).current

const xPosition=React.useRef（新的动画.Value（0））.current

---

useRef

接收类型与useState钩子相同。您只需将其传递到。

结果是我在BottomTabNavigator组件中以错误的方式调用了此组件

之前：

<TabMenu.Navigator initialRouteName="Performance" tabBar={BottomTabMenu}>
  <TabMenu.Screen name="Performance" component={Performance} />
  <TabMenu.Screen name="Wallet" component={Wallet} />
  <TabMenu.Screen name="Transactions" component={Transactions} />
  <TabMenu.Screen name="Settings" component={Settings} />
</TabMenu.Navigator>

之后：

<TabMenu.Navigator initialRouteName="Performance" tabBar={props => <BottomTabMenu {...props} />}>
  <TabMenu.Screen name="Performance" component={Performance} />
  <TabMenu.Screen name="Wallet" component={Wallet} />
  <TabMenu.Screen name="Transactions" component={Transactions} />
  <TabMenu.Screen name="Settings" component={Settings} />
</TabMenu.Navigator>

}>

这段代码

tabBar={props=>}

成功了

---

感谢@CharlesKornoelje和@RowanX的帮助

在访问值时，而不是调用

useRef（）

时，您应该使用

.current

。Try:

constxposition=useRef（新的动画.Value（0））转换：[{translateX:xPosition.current}]

。这解决了你的问题吗？嘿@CharlesKornoelje不幸的是，它没有解决问题。。我从我站的文档中获得的useRef中的.current已更正。我将进一步研究这一点，但也许其他人会提供一个有效的答案。如果您使用不同的调用方法

，例如

{BottomTabMenu（）}

，那么您将得到您正在经历的错误。嘿@CharlesKornoelje非常感谢您的帮助，您实际上指导了正确的方向。。我错误地使用了Tab.Navigator组件。。我将在下面发布无法解决问题的解决方案…./仍然得到相同的异常，而且我必须将其更改为useReact，否则它将无法编译。。