[英]React Native - Invalid hook call using useRef
我正在嘗試在 React Native 中的一個組件中使用 useRef(),但我不斷得到
組件異常:無效的掛鈎調用。 鈎子只能在 function 組件的主體內部調用
我的組件:
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 沒有任何問題。這個特別是底部選項卡選項卡。
任何幫助是極大的贊賞!
原來我在 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 的幫助
嘗試執行以下操作:
const xPosition = React.useRef<HTMLElement | null>( new Animated.Value(0)).current
useRef
接收類型與 useState 鈎子相同。 您只需將其傳遞到 <>。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.