如何使用 React Navigation 创建像这样的中间选项卡按钮？

Question

我需要像这样使用 React Navigation (v6) 创建一个底部标签导航：

到目前为止，我所做的是：

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="ForYou" component={ForYouScreen} />
        <Tab.Screen name="Maps" component={MapsScreen} />
        <Tab.Screen name="Premium" component={PremiumScreen} />
        <Tab.Screen name="Shop" component={ShopScreen} />
        <Tab.Screen name="Media" component={MediaScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

但我不确定样式的正确方法，我应该尝试以某种方式设置第三个标签按钮的样式吗？或者我应该创建一个 4 个选项卡导航并在中间创建一个浮动按钮，但在这种情况下，如何在中间的选项卡中为其创建空间？

任何想法或 sn-p 表示赞赏。

Answer 1

你可以做的是添加一个自定义 tabBarButton 并像这样在其中使用 svg（你需要安装 react-native-svg）

 //background svg which will create space
 const TabBg = ({ color = '#FFFFFF', ...props }) => {
  return (
    <Svg width={75} height={61} viewBox="0 0 75 61" {...props}>
      <Path
        d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
        fill={color}
      />
    </Svg>
  );
};

//custom tabBarButton
const TabBarAdvancedButton = ({ bgColor, ...props }) => {
  return (
    <View style={styles.container} pointerEvents="box-none">
      <TabBg color={bgColor} style={styles.background} />
      <TouchableOpacity
        style={styles.button}
        onPress={props.onPress}>
        // any image or icon here
      </TouchableOpacity>
    </View>
  );
};
const styles = StyleSheet.create({
container: {
    position: 'relative',
    width: 75,
    alignItems: 'center'
  },
  background: {
    position: 'absolute',
    top: 0,
  },
  button: {
    top: -22.5,
    justifyContent: 'center',
    alignItems: 'center',
    width: 50,
    height: 50,
    borderRadius: 27,
    backgroundColor: '#E94F37',
  },
  buttonIcon: {
    fontSize: 16,
    color: '#F6F7EB'
  }
});



// add your custom tabBarButton component
<Tab.Screen
 name="Premium"
  component={PremiumScreen}
  options={{
    tabBarButton: (props) => (
      <TabBarAdvancedButton
        bgColor={barColor} // background space color.
        {...props}
      />
    )
  }}
/>

如果您需要更多帮助，您可以按照您想要的方式进行自定义，您可以按照下面提到的文章进行操作。这适用于 react-navigation v6。

ReactNative: TabBar With Float Button