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 (
            
                
                     }
                        renderSelectedIcon={() => }
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        
                    
                     }
                        renderSelectedIcon={() => }
                        onPress={() => this.setState({ selectedTab: '购物车' })}>
                        
                    
                     }
                        renderSelectedIcon={() => }
                        onPress={() => this.setState({ selectedTab: '我的' })}>
                        
                    
                
            
        );
    }
}

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