react native开发第三方库（tab-navigator）

最新推荐文章于 2024-08-25 09:44:07 发布

原创最新推荐文章于 2024-08-25 09:44:07 发布 · 735 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用 react-native-tab-navigator 库实现 React Native 应用中的底部标签导航功能，包括安装步骤、代码示例及图标配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用第三方库（react-native-tab-navigator）

安装方法（在项目中）

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

在项目中的package.json中可查看是否加载（project/package.json）

代码（文件tab.js)

import React, {Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
//cmd项目路径下执行npm install react-native-tab-navigator --save
import TabNavigator from 'react-native-tab-navigator'
export default class Tabnavigator extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Event'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        //设置选中的位置
                        selected={this.state.selectedTab === 'Event'}
                        //标题
                        title="Event"
                        //标题样式
                        titleStyle={styles.tabText}
                        //选中时标题文字样式
                        selectedTitleStyle={styles.selectedTabText}
                        //图标
                        renderIcon={() => <Image style={styles.icon} source={require("./images/icon.png")} />}
                        //选中时图标
                        SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/icon.png")} />}
                        //点击Event
                        onPress={() => this.setState({ selectedTab: 'Event' })}>
                        <View style={styles.page0}>
                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Event Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Log'}
                        title="Log"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                         renderIcon={() => <Image style={styles.icon} source={require("./res/images/home.png")} />}
                        //选中时图标
                        SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/home.png")} />}
            
                        onPress={() => this.setState({ selectedTab: 'Log' })}>
                        <View style={styles.page0}>
                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Log Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Device'}
                        title="Device"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./images/yijian.png")} />}
                        //选中时图标
                        SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/yijian.png")} />}
                        
                        onPress={() => this.setState({ selectedTab: 'Device' })}>
                        <View style={styles.page1}>
                            <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is Device Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'User'}
                        title="User"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("./images/configuration.png")} />}
                        //选中时图标
                        SelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/configuration.png")} />}
    
                        onPress={() => this.setState({ selectedTab: 'User' })}>
                        <View style={styles.page1}>
                            <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is User Page</Text>
                        </View>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        fontSize: 10,
        color: 'black'
    },
    selectedTabText: {
        fontSize: 10,
        color: 'red'
    },
    icon: {
        width: 22,
        height: 22
    },
    page0: {
        flex: 1,
        backgroundColor: 'yellow'
    },
    page1: {
        flex: 1,
        backgroundColor: 'blue'
    }
});

在index.js文件中注册

import { AppRegistry } from 'react-native';
import Tabnavigator from './tab'
AppRegistry.registerComponent('wang', ()

项目中所引用的图标下载地址阿里图标库http://www.iconfont.cn

在项目下即tab.js文件同目录创建images文件夹，将png图片放入（project/images/***.png)