React native 创建矩形底部，加上半个矩形被圆切割 [英] React native create rectangle bottom, plus half rectangle is cut by circle

问题描述

您好，我有创建自定义形状图形的任务.在底部图形的形状是矩形，矩形的一半顶部被圆形切割.谁能给我指示从现在开始去哪里?

Hello I am having task to create custom shape figure. On the bottom the shape of figure is rectangle and on half top of rectangle is cut by circle shape. Can anyone give me direction where to go from now?

推荐答案

import React, { Component } from 'react';
import { View } from 'react-native';
import { Icon} from 'react-native-elements'

class BottomNavigator extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'column',
                backgroundColor: '#f8f4f4'

            }}>
                <View style={{ position: 'absolute', alignSelf: 'center', backgroundColor: '#f8f4f4', width: 70, height: 70, borderRadius: 35, bottom: 25, zIndex: 10 }}>
                    <Icon
                        name='add'
                        type='material'
                        color='#f00'
                        containerStyle={{ alignSelf: 'center' }}
                        reverse
                        size={28}
                        onPress={() => {}}
                    />
                </View>
                <View style={{ position: 'absolute', backgroundColor: '#2196F3', bottom: 0, zIndex: 1, width: '100%', height: 60, flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 10 }}>
                    <Icon
                        name='menu'
                        type='material'
                        color='#fff'
                        onPress={() => {}}

                    />
                    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                        <Icon
                            name='favorite'
                            type='material'
                            color='#fff'
                            onPress={() => {}}
                            containerStyle={{ marginHorizontal: 16 }}
                        />
                        <Icon
                            name='search'
                            type='material'
                            color='#fff'
                        />
                    </View>
                </View>
            </View>
        );
    }
}

export default BottomNavigator;

这篇关于React native 创建矩形底部，加上半个矩形被圆切割的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！