Question

我正在一个带有选项卡的React Native项目。我想从我提供的导航器数组中生成一个标签栏。我的脚本如下所示。

//LoggedinNavigator.js
const navigators = {
  ...variants, //variants is an array of navigators
  AccountNavigator,
};

console.log('navigators = ', navigators);

const loggedInNav = createBottomTabNavigator({
    ...navigators
  },
  {
    initialRouteName: '0',
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: variables.brandPrimary,
      inactiveTintColor: variables.tabIconDark,
      showIcon: true,
    },
    tabBarComponent: props => {
      return (
        <Footer style={{ height: 58 }}>
          <FooterTab style={{ alignItems: 'center' }}>
            {variants.map((data, index) => {
              console.log('data log ' + JSON.stringify(data));
              let focused = index === props.navigation.state.index;
              let tintColor = focused ? variables.brandPrimary : variables.brandBorder;
              return(
                <Button
                  key={index}
                  active={false}
                  onPress={() => props.navigation.navigate(index.toString())}>
                    {/* {props.renderIcon({index, focused, tintColor})} */}
                </Button>
              );
            })}
          </FooterTab>
        </Footer>
      );
    },
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarVisible: false,
    }),
  }
);

就像我说的那样，我有一组导航器，它们存储在“变体”数组中。我的导航器脚本都看起来像这样：

const ConciergeNavigator = createStackNavigator({
    Index,
  },
  {
    initialRouteName: 'Index',
    defaultNavigationOptions: ({ navigation }) => ({
      headerStyle: {
        backgroundColor: variables.brandPrimary,
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontFamily: variables.fontFamily,
        fontWeight: 'normal',
        fontSize: variables.titleFontSize,
        alignSelf:'center',
        textAlign: 'center',
      },
      headerRight: (
        <HeaderIcons
          showAccount="true"
          onPressAccount={() => navigation.navigate('Account')}
        />
      ),      
    }),
  });

  let navigator = createAppContainer(ConciergeNavigator);

  navigator.navigationOptions = ({ navigation: { state: { routes, index } } }) => {
    let tabBarVisible = true;
    let tabBarIcon = <FontAwesome5 name={'concierge-bell'} style={{fontSize:33}}/>;
    return {
      tabBarVisible: ({ tintColor,focused }) => (tabBarVisible),
      tabBarIcon,
    };
  };
  
  export default navigator;

如您所见，我在该导航器的navigator选项中为每个导航器定义了图标。我知道这行得通，因为当我构建没有自定义tabBarComponent的选项卡时，它会正确显示所有图像。（与此有关的问题是，它还在选项卡栏中显示了我不想要的accountsnavigator，并且还显示了我也不需要的文本标签）。

我遇到的挑战实际上是使用我存储在自定义tabBarComponent的navigationoptions中的图标。我在网上看到了一些使用“ renderIcon（）”函数（或Icon（）函数）的文档，例如，此博客：https://dev.to/hrastnik/lets-create-a-custom-animated-tab-bar-with-react-native-3496，但这对我不起作用。当我记录我的道具时，它甚至也没有显示任何renderIcon属性。

如何在React Native App的自定义TabBarComponent中显示导航选项中的图标

0 个答案: