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。没必要只是推荐。使用内联样式，方便您进行编辑。我希望这可以帮助你。

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

1 个答案: