0

我如何在本机反应中创建这样的标签栏？

谷歌任务标签栏

有没有这样的样品？

4

3 回答 3

0

使用图像您可以实现它 Sample Snack：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',
  }
});
于 2019-08-01T13:44:15.103 回答
0

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

于 2019-08-01T11:42:48.210 回答
0

I have created one using SVG and path and I took help from following Code

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

also the github code : https://github.com/alex-melnyk/clipped-tabbar

Hope this is helpful. Thanks

于 2021-01-31T11:59:15.790 回答