带有弧形/驼峰的底部选项卡导航

Question

如何在 react native 中创建上述内容？

Answer 1

我已经完成了 ART 库。它并不完美，但它可以给出想法请检查零食。

https://snack.expo.io/@nazrdogan/intrigued-yogurt

import * as React from 'react';
import { Text, View, StyleSheet, ART, Dimensions } from 'react-native';
import { Constants } from 'expo';
const { Surface, Group, Shape, Path } = ART;
import { Card } from 'react-native-paper';
import { IconButton, Colors, FAB } from 'react-native-paper';
const MyComponent = () => (
  <FAB style={styles1.fab} onPress={() => console.log('Pressed')} />
);
const styles1 = StyleSheet.create({
  fab: {
    position: 'absolute',
    alignSelf: 'center',
    bottom: 30,
  },
});
export default class App extends React.Component {
  render() {
    let deviceWidth = Dimensions.get('window').width;
    return (
      <View style={styles.container}>
        <View>
          <Surface width={deviceWidth} height={60}>
            <Shape
              d={new Path()
                .moveTo(0, 0)
                .lineTo(0, deviceWidth)
                .lineTo(deviceWidth, deviceWidth)
                .lineTo(deviceWidth, 0)
                .move(-deviceWidth / 2 + 60, 0)
                .arc(-120, 0, 80, 120)
                .close()}
              fill={'#f00'}
            />
          </Surface>
          <IconButton
            style={{ left: 0, position: 'absolute', zIndex: 100 }}
            icon="add-a-photo"
            color={'white'}
            size={30}
            onPress={() => console.log('Pressed')}
          />
          <MyComponent />
          <IconButton
            style={{ right: 0, position: 'absolute', zIndex: 100 }}
            icon="add-a-photo"
            color={'white'}
            size={30}
            onPress={() => console.log('Pressed')}
          />
        </View>
      </View>
    );
  }
}

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