ReactNative-底部TabBar react-native-tab-navigator

首先需要安装 react-native-tab-navigator

npm install react-native-tab-navigator –save

导入组件

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

详细代码如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Text,
  Image,
  View,
} from 'react-native';

import { StackNavigator } from 'react-navigation';

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

export default class DemoApp extends Component {

    constructor(props){  
        super(props)  
        this.state={  
            selectedTab:'首页',  
        }  
    } 

  render() {
    return (
      
        
            this.state.selectedTab === '首页'}
                title = '首页'
                titleStyle={styles.tabText}
                selectedTitleStyle={styles.selectedTabText} 
                renderIcon={() => require("./images/[email protected]")} />}

                renderSelectedIcon={() => tintColor:'red'}]} source={require("./images/[email protected]")} />}

                onPress={() => this.setState({ selectedTab: '首页' })}
            >
                
                    fontSize:18,padding:15,color: 'blue'}}>首页
                
            

            this.state.selectedTab === '购物车'}
                title = '购物车'
                titleStyle={styles.tabText}
                selectedTitleStyle={styles.selectedTabText} 
                renderIcon={() => require("./images/[email protected]")} />}

                renderSelectedIcon={() => tintColor:'red'}]} source={require("./images/[email protected]")} />}

                onPress={() => this.setState({ selectedTab: '购物车' })}
            >
                
                    fontSize:18,padding:15,color: 'blue'}}>购物车
                
            

            this.state.selectedTab === '目的地'}
                title = '目的地'
                titleStyle={styles.tabText}
                selectedTitleStyle={styles.selectedTabText} 
                renderIcon={() => require("./images/[email protected]")} />}

                renderSelectedIcon={() => tintColor:'red'}]} source={require("./images/[email protected]")} />}

                onPress={() => this.setState({ selectedTab: '目的地' })}
            >
                
                    fontSize:18,padding:15,color: 'blue'}}>目的地
                
            

            this.state.selectedTab === '我的'}
                title = '我的'
                titleStyle={styles.tabText}
                selectedTitleStyle={styles.selectedTabText} 
                renderIcon={() => require("./images/[email protected]")} />}

                renderSelectedIcon={() => tintColor:'red'}]} source={require("./images/[email protected]")} />}

                onPress={() => this.setState({ selectedTab: '我的' })}
            >
                
                    fontSize:18,padding:15,color: 'blue'}}>我的
                
            
        
      
    );
  }
}

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: 'red'
    }
});

AppRegistry.registerComponent('DemoApp', () => DemoApp);

效果图：