React Native - 使用 useRef 的挂钩调用无效

Question

我正在尝试在 React Native 中的一个组件中使用 useRef()，但我一直收到

Component Exception: Invalid Hook Call. Hooks can only be called inside of the body of a function component

我的组件：

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>
  )
}

我在其他组件中使用过 useRef，没有任何问题。这个特别是底部选项卡。

非常感谢任何帮助！

Answer 1

尝试执行以下操作：

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

useRef 接收类型与 useState 挂钩相同。你只需要将它传递到 <>.

Answer 2

原来我在 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 => <BottomTabMenu {...props} />} 成功了..

感谢@CharlesKornoelje 和@RowanX 的帮助

React Native - 使用 useRef 的挂钩调用无效

React Native - Invalid hook call using useRef

reactjs

react-native

react-native-navigation