react-native仿Android底部table(过时的了)_react 底部table-优快云博客

本文链接：https://blog.youkuaiyun.com/big_sea_m/article/details/78341856

本文介绍如何使用react-native-tab-navigator库实现React Native应用中的底部Tab导航功能。通过简单的步骤和示例代码展示了如何配置Tab组件、设置图标及标题样式，并通过状态管理实现页面间的切换。

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

react-native仿Android底部table

使用步骤

1.添加库开始我使用的npm install react-native-tab-navigator –save 文件是加载进来了，但是一直报错

yarn add react-native-tab-navigator

2.使用，使用方式很简单，按以下模板就行

import React from 'react';

// 引入布局View
import { StyleSheet, View, Text, Image } from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

export default class MainHome extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            selectedTab: 'Android'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        //设置选中的位置
                        selected={this.state.selectedTab === 'Android'}
                        //标题
                        title="Android"
                        //标题样式
                        titleStyle={styles.tabText}
                        //选中时标题文字样式
                        selectedTitleStyle={styles.selectedTabText}
                        //图标
                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/android.png")} />}
                        //选中时图标
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/android_select.png")} />}
                        //点击Event
                        onPress={() => this.setState({ selectedTab: 'Android' })}>
                        <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 === 'Img'}
                        title="Img"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/img.png")} />}
                        renderSelectedIcon={() =>  <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/img_select.png")} />}
                        onPress={() => this.setState({ selectedTab: 'Img' })}>
                        <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 === 'Ios'}
                        title="Ios"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/ios.png")} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/ios_select.png")} />}
                        onPress={() => this.setState({ selectedTab: 'Ios' })}>
                        <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 === 'All'}
                        title="All"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../res/images/all.png")} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("../res/images/all_select.png")} />}
                        onPress={() => this.setState({ selectedTab: 'All' })}>
                        <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,
        backgroundColor: '#e8ffce'
    },
    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'
    }
});