如何在 React Native 导航中设计完整的 Center Cut FAB

Question

我需要在 React Native 中创建一个带有浮动操作按钮的自定义底部导航作为一个完整的中心切入点。我会附上图片。我正是需要这个并且没有教程可以遵循 now.I 需要帮助。你可以删除链接我可以 follow.If 你做过这样的事情，你可以分享代码

Answer 1

我在我的一个项目中就是这样做的。创建 "BottomNavigator" 组件并将其导入我希望的任何 class:

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;

并在任何 class 导入和使用 <BottomNavigator />。我正在使用 react-native-elements 和 vector-icons。没必要只是推荐。使用内联样式让您轻松编辑。我希望这可以帮助你。

如何在 React Native 导航中设计完整的 Center Cut FAB

How to design full Center Cut FAB in react native navigation

material-design

react-native

react-native-navigation