0

我需要使用 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 个选项卡导航并在中间创建一个浮动按钮,但在这种情况下,我如何在中间的选项卡中为其创建空间?

任何想法或片段表示赞赏。

4

1 回答 1

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

于 2021-11-24T16:01:43.550 回答