标签: react-navigation-top-tabs

我被困。我正在使用 React Native CLI 和 React Navigation 6.x 开发移动应用程序，然后当我使用材料顶部选项卡导航器时，从左到右或从右到左滑动。它总是发送警告

我尝试过 useFocusEffect、addListeners

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import React, {useEffect} from 'react';
import AScreen from '../screens/Home/AScreen';
import BScreen from '../screens/Home/BScreen';

const Tab = createMaterialTopTabNavigator();
const HomeStack = () => {
  useEffect(() => {
    console.log('HomeStack');
  }, []);

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#fff',
        tabBarStyle: {
          borderTopWidth: 0.2,
          borderTopColor: '#ccc',
        },
        tabBarIndicatorStyle: {
          backgroundColor: '#fff',
        },
        lazy: true,
      }}
      initialRouteName="A"
      shouldRasterizeIOS>
      <Tab.Screen name="A" component={AScreen} />
      <Tab.Screen name="B" component={BScreen} />
    </Tab.Navigator>
  );
};

export default …

我想创建一个顶部选项卡导航器，并将两个屏幕 Badges.js 和 Studying.js 放入选项卡中，当我在设备上运行它时，我收到一条错误，显示“错误：元素类型无效：需要一个字符串...”并且“检查‘MaterialTopTabNavigator’的渲染方法”。

TabScreen.js

import React from 'react';
import {View, Image, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Badges from './Badge';
import Studying from './Studying';

const Tab = createMaterialTopTabNavigator();

const TabsScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Badges" component={Badges} />
      <Tab.Screen name="Studying" component={Studying} />
    </Tab.Navigator>
  );
};
export default TabsScreen;

徽章.js

import React from 'react';
import {View, Image, Text} from 'react-native';

const Badges = () => {
  return (
    <View>
      <Text>Badges</Text> …