我怎样才能创建这样的标签栏？有样品吗？答案

【问题标题】：How can i create tab bar like this? is there any sample?我怎样才能创建这样的标签栏？有样品吗？
【发布时间】：2019-08-01 11:32:46
【问题描述】：

如何在 react native 中创建这样的标签栏？

google tasks tab bar

有这样的样本吗？

【问题讨论】：

标签： react-native react-native-navigation react-native-tabnavigator

【解决方案1】：

我创建了一个这样的，中间有一个SVG。左右是一个空的view，有宽度和背景颜色。中间是 SVG 组件。浮动按钮具有绝对位置。我不知道是否有更好的方法来做到这一点，但这是我的解决方案。

【讨论】：

你有样品吗？

【解决方案2】：

使用图片可以实现小吃样品：https://snack.expo.io/@msbot01/intelligent-croissant

import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/FontAwesome';


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>

        <View style={{backgroundColor:'white', height:'10%', bottom:0, position:'absolute', zIndex:1, width:'100%', justifyContent:'space-between',paddingLeft:15,paddingRight:15, flexDirection:'row', alignItems:'center', shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 5 }}>
          <View>
            <Icon name="bars" size={25} color="grey" />
          </View>
          <View style={{height:'100%',width:100, backgroundColor:'white'}}>
            <Image style={{width:100,paddingBottom:'20%', position:'absolute', zIndex:3, bottom:'61%' }} source={require('./bottom round 2.png')} />
          </View>
          <View>
            <Icon name="ellipsis-v" size={25} color="grey" />
          </View>
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'white',
    position:'relative',
  }
});

【讨论】：

【解决方案3】：

我使用 SVG 和路径创建了一个，并从以下代码中获得了帮助

https://itnext.io/reactnative-curved-tabbar-dc62e681c24d

还有 github 代码：https://github.com/alex-melnyk/clipped-tabbar

希望这会有所帮助。谢谢

【讨论】：