Question

自定义顶部标签的指示器时遇到问题。我找不到任何示例或方法来解释如何进行。

我正在实现顶部的标签栏，我跟随the react native documentation。我不想使用标签指示器的默认颜色，因此我在文档中发现可以使用 tabBarOptions 及其适当的 renderIndicator 自定义指示器a（根据文档）：

该函数采用当前路线的对象并返回自定义的React Element用作选项卡指示符。

我正在使用：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import ProfilePage from '../Components/ProfilePage'

const Tab = createMaterialTopTabNavigator();

function MyTabIndicator() {
  return(<View style={{height: 10, width: 10, backgroundColor:'white'}}/>)
}

function ProfilStack() {

  return (
    <NavigationContainer theme={DarkTheme} independent={true}>
      <Tab.Navigator tabBarOptions={{ renderIndicator: MyTabIndicator }}>
        <Tab.Screen
          name="Profile"
          component={ProfilePage}
          options={{ title: 'Profile' }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default ProfilStack;

没有tabBarOption的话，它会很好地工作，但是如果我想使用一个小方块的 MyTabIndicator ，则会出现问题（红色屏幕）：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of 'TabBar'

我找不到任何解决方案。检查TabBar方法，但找不到任何有趣的信息。

所以我想问你，如何通过自定义图标（例如正方形）更改导航中的实际条形图，或者至少更改原始图形条的颜色。

我在网上看到了一些技巧，但这只是关于找到使用此 tabBarOptions 的另一种方法。我想使其正常运行，不需要任何其他解决方案，我更希望拥有一个官方的标签栏，而不是我自己的标签栏。

在顶部选项卡导航器中自定义或修改renderIndicator

0 个答案: