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

1.下载

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

2. 导入

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

3. 完整代码

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",        fontSize: 13    },    icon: {        width: 20,        height: 20    }});