react-native-tab-navigator简单使用

来源：互联网发布：算法导论第四版pdf 编辑：程序博客网时间：2024/05/28 06:05

在ReactNative项目中加入底部导航栏，效果如图所示：
效果如下：
这里写图片描述

源码：传送门

第一步：导入项目

npm install react-native-tab-navigator -save

第二步：文件中导入使用

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

tab的页面为：

import React, {Component} from 'react';import {Image, StyleSheet, View} from 'react-native'import TabNavigator from 'react-native-tab-navigator'import Weather from './weather'import Article from './article'import Map from './map'import Setting from './setting'let weatherNormal = require('../images/weather_normal.png')let weatherSelected = require('../images/weather_slelected.png')let articleNormal = require('../images/article_normal.png')let articleSelected = require('../images/article_selected.png')let mapNormal = require('../images/map_normal.png')let mapSelected = require('../images/map_selected.png')let settingNormal = require('../images/setting_normal.png')let settingSelected = require('../images/setting_selected.png')export default class TabNav extends Component {    constructor(props) {        super(props)        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={weatherNormal}/>}                        renderSelectedIcon={() => <Image style={styles.icon}                                                         source={weatherSelected}/>}                        onPress={() => this.setState({selectedTab: '天气'})}>                        <Weather/>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab === '文章'}                        title="文章"                        titleStyle={styles.tabText}                        selectedTitleStyle={styles.selectedTabText}                        renderIcon={() => <Image style={styles.icon} source={articleNormal}/>}                        renderSelectedIcon={() => <Image style={styles.icon}                                                         source={articleSelected}/>}                        onPress={() => this.setState({selectedTab: '文章'})}>                        <Article/>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab === '地图'}                        title="地图"                        titleStyle={styles.tabText}                        selectedTitleStyle={styles.selectedTabText}                        renderIcon={() => <Image style={styles.icon} source={mapNormal}/>}                        renderSelectedIcon={() => <Image style={styles.icon}                                                         source={mapSelected}/>}                        onPress={() => this.setState({selectedTab: '地图'})}>                        <Map/>                    </TabNavigator.Item>                    <TabNavigator.Item                        selected={this.state.selectedTab === '设置'}                        title="设置"                        titleStyle={styles.tabText}                        selectedTitleStyle={styles.selectedTabText}                        renderIcon={() => <Image style={styles.icon} source={settingNormal}/>}                        renderSelectedIcon={() => <Image style={styles.icon}                                                         source={settingSelected}/>}                        onPress={() => this.setState({selectedTab: '设置'})}>                        <Setting/>                    </TabNavigator.Item>                </TabNavigator>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1    },    tabText: {        color: "#BFBFBF",        fontSize: 13    },    selectedTabText: {        color: "#1296DB",        fontSize: 13    },    icon: {        width: 20,        height: 20    }});

源码：传送门

阅读全文

0 0