UI-Kitten 导航组件中 useStyleSheet 钩子的无效钩子调用错误

时间:2021-03-22 20:15:52

标签: reactjs react-native-ui-kitten

尝试将一些自定义样式应用到 UI-Kitten 底部标签栏并收到“无效的钩子调用”错误。

  • 它是一个功能组件。
  • 我不认为我有多个 React 实例。 npm ls react 仅显示一个实例。
  • 我在同一个应用中的不同组件上使用相同的钩子,没有任何问题。
  • 整个应用中的其他钩子用法也很好。
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
...

function BottomTabBar({navigation, state}) {
    const myStyles = useStyleSheet(themedStyles);
    
    const onSelect = (index) => {
        navigation.navigate(state.routeNames[index]);
    };

    return (
        <BottomNavigation selectedIndex={state.index} onSelect={onSelect} style={myStyles.bottomNav}>
            <BottomNavigationTab icon={HomeIcon} title="Home" />
            <BottomNavigationTab icon={CreateIcon} title="CreateThing" />
            <BottomNavigationTab icon={SettingIcon} title="Settings" />
        </BottomNavigation>
    );
}

...
const BottomTab = createBottomTabNavigator();

const TabNavigator = () => {
    return (
        <BottomTab.Navigator initialRouteName="Home" tabBar={BottomTabBar}>
            <BottomTab.Screen name="Home" component={Home} />
            <BottomTab.Screen name="CreateThing" component={CreateThing} />
            <BottomTab.Screen name="Settings" component={Settings} />
        </BottomTab.Navigator>
    );
};

const themedStyles = StyleService.create({
    bottomNav: {
        backgroundColor: 'color-primary-default',
    },
});

export default TabNavigator;

对我来说,钩子似乎没有违反任何规则。知道这里发生了什么吗?

0 个答案:

没有答案