react-native-tab-navigator来做底部导航tabbar

我会带着你远行 2022-06-18 08:22 164阅读 0赞

1.github上的地址：

[https://github.com/lwx123/react-native-tab-navigator][https_github.com_lwx123_react-native-tab-navigator]

[  
][https_github.com_lwx123_react-native-tab-navigator]

2.终端运行：

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

下载[  
][https_github.com_lwx123_react-native-tab-navigator]

3.导入，类似安卓，

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

4.完整代码：[  
][https_github.com_lwx123_react-native-tab-navigator]

[  
][https_github.com_lwx123_react-native-tab-navigator]

/**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image
    } from 'react-native';
    
    import TabNavigator from 'react-native-tab-navigator';
    import HomeComponent from './home/HomeComponent';
    import SmartLiveComponent from './smart_live/SmartLiveComponent';
    import MyComponent from './my/MyComponent';
    
    export default class MangoClient 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("./images/btn_tab_first.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={
      require("./images/btn_tab_first_over.png")} />}
                            onPress={() => this.setState({ selectedTab: '首页' })}>
                            <HomeComponent/>
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={
      this.state.selectedTab === '智居'}
                            title="智居"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={
      require("./images/btn_tab_second.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={
      require("./images/btn_tab_second_over.png")} />}
                            onPress={() => this.setState({ selectedTab: '智居' })}>
                            <SmartLiveComponent />
                        </TabNavigator.Item>
                        <TabNavigator.Item
                            selected={
      this.state.selectedTab === '我的'}
                            title="我的"
                            titleStyle={styles.tabText}
                            selectedTitleStyle={styles.selectedTabText}
                            renderIcon={() => <Image style={styles.icon} source={
      require("./images/btn_tab_four.png")} />}
                            renderSelectedIcon={() => <Image style={styles.icon} source={
      require("./images/btn_tab_four_over.png")} />}
                            onPress={() => this.setState({ selectedTab: '我的' })}>
                            <MyComponent />
                        </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
        }
    });
    
    AppRegistry.registerComponent('MangoClient', () => MangoClient);

可以自己定义选中与未选中text和图标的样式，

别忘了导入子页面：

import HomeComponent from './home/HomeComponent';
    import SmartLiveComponent from './smart_live/SmartLiveComponent';
    import MyComponent from './my/MyComponent';

注意自己子页面的路径。

效果：

![Center][]

[  
][https_github.com_lwx123_react-native-tab-navigator]

[https_github.com_lwx123_react-native-tab-navigator]: https://github.com/lwx123/react-native-tab-navigator
[Center]: /images/20220618/2f481084d25f4c0aa30cf1936286b880.png