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

Question

我需要创建一个带有浮动操作按钮的自定义底部导航作为 React Native 中的完整中心切口。我会附上图片。我正是需要这个，目前还没有教程可以学习。我需要帮助。你可以删除我可以关注的链接。如果你做过这样的事情，你可以分享代码

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 />. 我正在使用 react-native-elements 和 vector-icons。没有必要只是推荐。使用内联样式，便于编辑。我希望这可以帮助你。