react-native TabNavigator底部导航栏

雨点打透心脏的1/2处 2022-04-23 02:30 162阅读 0赞

先上效果图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70][]

1、根目录 安装：

npm install react-native-tab-navigator --save

2、引入

import TabNavigator from 'react-native-tab-navigator';

3、完整代码

import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image
    } from 'react-native';
    
    import TabNavigator from 'react-native-tab-navigator';
    
    export default class Index extends Component {
        constructor() {
            super();
            this.state = {
                selectedTab: '个人中心',
            }
        }
        render() {
            return (
                <View style={styles.container}>
                    <TabNavigator>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === '首页'}
                            title="首页"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                            onPress={() => this.setState({ selectedTab: '首页' })}>
                            <Text>这里可</Text>
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === '接待/预约'}
                            title="接待/预约"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                            onPress={() => this.setState({ selectedTab: '接待/预约' })}>
                            <Text>以放你</Text>
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={this.state.selectedTab === '个人中心'}
                            title="个人中心"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={require("./img/delete.png")} />}
                            onPress={() => this.setState({ selectedTab: '个人中心' })}>
                            <Text>组件</Text>
                        </TabNavigator.Item>
                    </TabNavigator>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1
        },
        tabText: {
            color: "#666666",
            fontSize: 13
        },
        selectedTabText: {
            color: "#ff8a00",
            fontSize: 13
        },
        icon: {
            width: 25,
            height: 25
        }
    });

注意图片路径！！可能会报错~~~

navigator的属性tabBarStyle来指定导航栏的高度

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F1aG9uZ3FpYW5n_size_16_color_FFFFFF_t_70]: /images/20220323/7c54c6fe5b4b463288ad27f321d6f882.png