React-Native学习笔记之：使用Tab react-native-tab-navigator框架

最新推荐文章于 2024-08-13 08:25:22 发布

智能座舱搬砖工

最新推荐文章于 2024-08-13 08:25:22 发布

阅读量1.2w

点赞数 1

分类专栏： react-native

本文链接：https://blog.csdn.net/true100/article/details/68066649

版权

react-native 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在React Native中，我们通常使用react-native-tab-navigator来做底部导航栏效果，使用前先要在项目中引入对应 依赖库，
引用方法：

windows环境，cmd命令窗口，进入到项目所在的文件目录，执行：

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

执行完成后，项目中即添加上了react-native-tab-navigator依赖库。使用如下：

import React, {Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
//导入react-native-tab-navigator方式：
//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("./res/images/icon_alarm_normal.png")} />}
                        //选中时图标
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./res/images/icon_alarm_normal.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/icon_event.png")} />}
                        renderSelectedIcon={() =>  <Image style={[styles.icon,{tintColor:'red'}]} source={require("./res/images/icon_event.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("./res/images/icon_device_normal.png")} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./res/images/icon_device_normal.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("./res/images/icon_user_normal.png")} />}
                        renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./res/images/icon_user_normal.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'
    }
});

// AppRegistry.registerComponent('Tabnavigator', () => Tabnavigator);