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

Posted 2023-02-16

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

【英文标题】：How can I create a middle tab button like these with React Navigation?

【发布时间】：2022-01-03 00:09:18

【问题描述】：

我需要像这样使用 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 表示赞赏。

【参考方案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

【讨论】：

欢迎来到 SO！感谢您提供答案！但是，仅链接的答案通常被认为是不充分/不完整的，因为如果链接在未来某个时候发生变化或损坏，它们可能会变得无用。您能否更新此帖子以包含更多详细信息，以便在链接遭到破坏时仍然有价值？如果不是，则此内容更适合作为评论而不是作为答案...

感谢您的告知。我完全明白。但是，我需要 50 个代表才能发表评论，这就是我将其发布为答案的原因，我应该删除此答案吗？

我认为以目前的形式，它可能不会被视为一个完整的答案，并且可能会被关闭。因此，您可以删除它，或您可以更新答案并将链接中的一些细节带入您的答案中，也许 OP 会投票并将其标记为完整为你赢得一些声誉:) 当然是你的选择。编码愉快！