React-Native学习--第三方 底部Tab react-native-tab-navigator

1.下载

npm install react-native-tab-navigator –save下载

2. 导入

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

import React,{Component} from 'react';
import {
    StyleSheet,View,Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'
import PosRN from '../index.ios'
import Mine from './mine'
import Cart from './cart'

export default class Main 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={require("../images/ic_home_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_home_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <PosRN/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '购物车'}
                        title="购物车"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '购物车' })}>
                        <Cart />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../images/ic_user_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_user_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '我的' })}>
                        <Mine />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flex: 1
    },tabText: {
        color: "#000000",fontSize: 13
    },selectedTabText: {
        color: "#999999",icon: {
        width: 20,height: 20
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!