如何在React Native中实现这个底部栏

Question

我需要在React Native中设计这个底部选项卡，我该如何实现这一点？

我正在尝试使用 React Native SVG 来做到这一点，但我没有得到想要的结果。 如果可能的话，还建议一种解决方案，使其动态化，因为当焦点从家庭圈改变时，这种变化会反映在焦点上。

这是我迄今为止所尝试过的。使用 React Native svg。

import React from 'react';
import {
  View,
  TouchableOpacity,
  StyleSheet,
  Text,
  Dimensions,
} from 'react-native';
import Svg, {Path} from 'react-native-svg';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

const {width: screenWidth} = Dimensions.get('screen');

const CustomTabBar = ({state, descriptors, navigation}) => {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.tabContainer, {paddingBottom: insets.bottom}]}>
      {/* SVG Background with a notch for the center button */}
      <Svg width={screenWidth} height={90} style={styles.svgBackground}>
        <Path
          d={`M0 20
             L${screenWidth * 0.25} 0
             Q${screenWidth * 0.4} 0, ${screenWidth * 0.45} 20
             Q${screenWidth * 0.5} 70, ${screenWidth * 0.55} 20
             Q${screenWidth * 0.6} 0, ${screenWidth * 0.75} 0
             L${screenWidth} 20
             L${screenWidth} 90 L0 90 Z`}
          fill="white"
          stroke="#ddd"
          strokeWidth="1"
        />
      </Svg>

      {state.routes.map((route, index) => {
        const {options} = descriptors[route.key];
        const isFocused = state.index === index;
        const onPress = () => {
          if (!isFocused) {
            navigation.navigate(route.name);
          }
        };

        if (route.name === 'Home') {
          return (
            <TouchableOpacity
              key={route.name}
              onPress={onPress}
              style={styles.centerButton}
            >
              <View style={styles.centerIcon}>
                <Text style={{color: 'black', fontSize: 20}}>🏠</Text>
              </View>
            </TouchableOpacity>
          );
        } else {
          return (
            <TouchableOpacity
              key={route.name}
              onPress={onPress}
              style={styles.tabButton}
            >
              <Text style={{color: isFocused ? 'yellow' : 'gray'}}>
                {options.tabBarLabel || route.name}
              </Text>
            </TouchableOpacity>
          );
        }
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    height: 70,
    position: 'relative',
  },
  svgBackground: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: 80,
    zIndex: -1,
  },
  centerButton: {
    top: -25,
    justifyContent: 'center',
    alignItems: 'center',
    width: 70,
    height: 70,
    borderRadius: 35,
    backgroundColor: 'yellow',
    shadowColor: 'black',
    shadowOffset: {width: 0, height: 4},
    shadowOpacity: 0.3,
    shadowRadius: 6,
    elevation: 10,
  },
  centerIcon: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'yellow',
  },
  tabButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default CustomTabBar;

Answer 1

您可以使用 React Native SVG 轻松实现这一点。 Muhammad numan 已经详细解释了如何实现这一点。请查看这个answer以获得深入的指南。