Как спроектировать полноценный центр Cut FAB в естественной реакции

Question

Мне нужно создать настраиваемую нижнюю навигацию с плавающей кнопкой действия в качестве полного среза по центру в реагирующей нативе.Я приложу изображение.Мне нужно именно это, и нет учебника для подражания, как сейчас. Мне нужна помощь.Вы можете сбросить ссылки, по которым я могу перейти. Если вы сделали что-то подобное, вы можете поделиться кодом

Answer 1

Мне это понравилось в одном проекте.создать компонент «BottomNavigator» и импортировать его в любой класс, который я хочу:

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

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

            }}>
                <View style={{ position: 'absolute', padding: 5, alignSelf: 'center', backgroundColor: '#fff', width: 70, height: 70, borderRadius: 35, bottom: 25, zIndex: 5 }}>
                    <Button
                        icon={{
                            name: 'plus',
                            type: 'feather',
                            color: '#fff',
                            style: { marginRight: 0 }
                        }}
                        onPress={() => this.doSomething()}
                        buttonStyle={{ backgroundColor: '#000', width: 60, height: 60, borderRadius: 30 }}
                        containerViewStyle={{ alignSelf: 'center' }}
                    />
                </View>
                <View style={{ position: 'absolute', backgroundColor: '#3F51B5', bottom: 0, zIndex: 1, width: '100%', height: 60, flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 10 }}>
                    <Icon
                        name='list'
                        type='feather'
                        color='#fff'
                        onPress={() => this.doSomething()} // Ex : openDrawer() in react-navigation

                    />
                    <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                        <Icon
                            name='heart'
                            type='feather'
                            color='#fff'
                            containerStyle={{ marginHorizontal: 10 }}
                        />
                        <Icon
                            name='search'
                            type='feather'
                            color='#fff'
                        />
                    </View>
                </View>
            </View>
        );
    }
}


export default BottomNavigator;

И в любой класс импортировать и использовать <BottomNavigator />.Я использую response-native-elements и vector-icons.Это не обязательно, просто рекомендуется.Используется встроенный стиль для удобного редактирования.Я надеюсь, это поможет вам.