创建弧形底部导航（实施前）

Question

如何在 React Native 中实现这一点？

到目前为止我已经有了这个，我想实现中间曲线。我不知道用透明视图处理它还是完全切换到 SVG

这是

tabBar

组件

/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'
import { Colors } from 'App/Theme'

export default class TabBar extends Component {
  render() {
    let {
      renderIcon,
      getLabelText,
      activeTintColor,
      inactiveTintColor,
      onTabPress,
      onTabLongPress,
      getAccessibilityLabel,
      navigation,
      showLabel,
    } = this.props

    let { routes, index: activeRouteIndex } = navigation.state

    return (
      <View style={styles.tabBar}>
        {routes.map((route, routeIndex) => {
          let isRouteActive = routeIndex === activeRouteIndex
          let tintColor = isRouteActive ? activeTintColor : inactiveTintColor

          return (
            <TouchableOpacity
              key={routeIndex}
              style={styles.tab}
              onPress={() => {
                onTabPress({ route })
              }}
              onLongPress={() => {
                onTabLongPress({ route })
              }}
              accessibilityLabel={getAccessibilityLabel({ route })}
            >
              {renderIcon({ route, focused: isRouteActive, tintColor })}
              {showLabel ? <Text>{getLabelText({ route })}</Text> : null}
            </TouchableOpacity>
          )
        })}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  tab: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
  },
  tabBar: {
    alignSelf: 'center',
    backgroundColor: Colors.primary,
    borderRadius: 50,
    bottom: 10,
    elevation: 2,
    flexDirection: 'row',
    height: 65,
    position: 'absolute',
    width: '95%',
  },
  infinity: {
    width: 80,
    height: 100,
  },
  infinityBefore: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: 0,
    height: 0,
    borderWidth: 20,
    borderColor: 'red',
    borderStyle: 'solid',
    borderTopLeftRadius: 50,
    borderTopRightRadius: 50,
    borderBottomRightRadius: 50,
    borderBottomLeftRadius: 0,
    transform: [{ rotate: '-135deg' }],
  },
  infinityAfter: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 0,
    height: 0,
    borderWidth: 20,
    borderColor: 'red',
    borderStyle: 'solid',
    borderTopLeftRadius: 50,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 50,
    borderBottomLeftRadius: 50,
    transform: [{ rotate: '-135deg' }],
  },
})

Answer 1

这里有演示：https://snack.expo.io/@nomi9995/cf371e

你需要使用react-native-svg

yarn add react-native-svg

import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  Dimensions,
  TouchableHighlight,
} from "react-native";
import Svg, { Circle, Path } from "react-native-svg";

const tabs = [1, 2, 3, 4, 5];
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pathX: "357",
      pathY: "675",
      pathA: "689",
      pathB: "706",
    };
  }
  render() {
    return (
      <View style={[styles.container]}>
        <View style={[styles.content]}>
          <View style={styles.subContent}>
            {tabs.map((_tabs, i) => {
              return (
                <TouchableHighlight
                  key={i}
                  underlayColor={"transparent"}
                  onPress={() => console.log("onPress")}
                >
                  <View>
                  </View>
                </TouchableHighlight>
              );
            })}
          </View>
          <Svg
            version="1.1"
            id="bottom-bar"
            x="0px"
            y="0px"
            width="100%"
            height="100"
            viewBox="0 0 1092 260"
            space="preserve"
          >
            <Path
              fill={"#373A50"}
              stroke={"#373A50"}
              d={`M30,60h${this.state.pathX}.3c17.2,0,31,14.4,30,31.6c-0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c-42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z`}
            />
            <Circle
              fill={"#7EE6D2"}
              stroke={"#7EE6D2"}
              cx="546"
              cy="100"
              r="100"
            />
          </Svg>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    overflow: "hidden",
  },
  content: {
    flexDirection: "column",
    zIndex: 0,
    width: Dimensions.get("window").width - 30,
    marginBottom: "4%",
    left: "4%",
    right: "4%",
    position: "absolute",
    bottom: "1%",
  },
  subContent: {
    flexDirection: "row",
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 10,
    zIndex: 1,
    position: "absolute",
    bottom: 5,
  }
});

我希望这对你有帮助。

Answer 2

根据您的要求，这是 2 种解决方案。

如果你想要这种没有选择的设计，那么这段代码将帮助你： https://github.com/alex-melnyk/clipped-tabbar

如果您需要在每个选项卡上进行选择，那么这里还有其他适合您的简单库： https://github.com/Jm-Zion/rn-wave-bottom-bar

Answer 3

仅用

<View/>

组件就可以做到这一点并不明显。我会将 TabBar 拆分为具有三个子视图的 flex 行容器，并创建一个 SVG，其填充的倒置半径将用于中心子视图。要渲染 SVG，请使用 react-native-svg。请参阅下面的粗略布局：

...

import { SvgXml } from 'react-native-svg';
import TabCenterSvg from ‘assets/my-svg.svg’

export default class TabBar extends Component {
    render() {
        return (
            <View style={styles.tabBar}>
                <View style={styles.leftContainer}>
                    {/* Left Buttons */}
                </View>
                <View style={styles.centerContainer}>
                    <View style={styles.centerInnerTopContainer}>
                        {/* Add Button */}
                    </View>
                    <View style={styles.centerInnerBottomContainer}>
                        <SvgXml xml={TabCenterSvg} />
                    </View>
                </View>
                <View style={styles.rightContainer}>
                    {/* Right Icons */}
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    tabBar: {
        alignSelf: 'center',
        borderRadius: 50,
        bottom: 10,
        elevation: 2,
        flexDirection: 'row',
        height: 65,
        position: 'absolute',
        width: '95%',
    },
    leftContainer: {
        flex: 1,
        flexDirection: 'row',
        borderBottomLeftRadius: 50,
        borderTopLeftRadius: 50,
        borderTopRightRadius: 50,
        backgroundColor: Colors.primary,
    },
    centerContainer: {
        flex: 1,
        flexDirection: 'column',
    },
    centerInnerTopContainer: {
        flex: 1,
    },
    centerInnerBottomContainer: {
        flex: 1,
    },
    rightContainer: {
        flex: 1,
        flexDirection: 'row',
        borderTopLeftRadius: 50,
        borderTopRightRadius: 50,
        borderBottomRightRadius: 50,
        backgroundColor: Colors.primary,
    },
})

Answer 4

使用这个库的代码并根据您的 UI 进行自定义

https://www.npmjs.com/package/curved-bottom-navigation-bar

注意：我不会推荐这个库，因为每周下载量很低。 您可以使用它的代码，而不是使用整个库。

Answer 5

现在可以使用这个包轻松完成：react-native-curved-bottom-bar

import { CurvedBottomBar } from 'react-native-curved-bottom-bar';

  const renderTabBar = ({ routeName, selectedTab, navigate }: 
    TabBarProps) => {
     return (
       <TouchableOpacity
         onPress={() => navigate(routeName)}
         style={styles.tabBarBtns}
       >
       {_renderIcon(routeName, selectedTab)}
       <Text
        fontFamily={typography.primary}
        style={{ fontSize: typography.FONT_SIZE_10 }}
        color={routeName === selectedTab ? palette.primary : 
        palette.gray}
       >
      {routeName}
    </Text>
  </TouchableOpacity>
  );
}


  <CurvedBottomBar.Navigator
    strokeWidth={1}
    circleWidth={56}
    strokeColor="#DDDDDD"
    defaultScreenOptions={navigation}
    style={styles.bottomBar}
    screenOptions={{ headerShown: false }}
    bgColor={isDarkMode ? palette.black : palette.white}
    initialRouteName={SCREENS.HOME}
    borderTopLeftRight
    renderCircle={() => (
     <IconButton
      height={spacing.SCALE_56}
      width={spacing.SCALE_56}
      onPress={handleAddComittee}
      borderRadius={spacing.SCALE_28}
      style={styles.btnCircle}
     >
      <FeatherIcon
        name={'plus'}
        color={palette.white}
        size={spacing.SCALE_22}
      />
    </IconButton>
  )}
  tabBar={renderTabBar}
>
  <CurvedBottomBar.Screen
    name={strings?.home}
    position="LEFT"
    component={Home}
  />
  <CurvedBottomBar.Screen
    name={strings?.chat}
    position="LEFT"
    component={Chat}
  />
  <CurvedBottomBar.Screen
    name={strings?.calendar}
    component={Calendar}
    position="RIGHT"
  />
  <CurvedBottomBar.Screen
    name={strings?.settings}
    component={Settings}
    position="RIGHT"
  />
</CurvedBottomBar.Navigator>