react-native底部導航欄實現

1. react-native-tab-navigator實現：

　　　　bottom.js代碼如下：

　　　　

import React, {Component} from 'react';
import {StyleSheet, View,Text,Image} from 'react-native'; import TabNavigator from 'react-native-tab-navigator' export default class Bottom extends Component { /*初始化state*/ constructor(props){ super(); this.state={ selectedTab:'tb_msg', } } /** * 公共組件方法 * @param selectedTab 選中的tab * @param title * @param icon * @param selectedIcon * @param imageStyle 選中時渲染圖標的顏色 * @param mark 角標 * @param viewContent 頁面內容 * @returns {*} */ tabNavigatorItems(selectedTab,title,icon,selectedIcon,imageStyle,mark,viewContent){ return ( <TabNavigator.Item selected={this.state.selectedTab === selectedTab } title={title} renderIcon={()=> <Image style={styles.myImage} source={icon}/> } renderSelectedIcon={()=> <Image style={[styles.myImage,{tintColor:imageStyle}]} source={selectedIcon}/> } badgeText={mark} onPress={()=> this.setState({selectedTab:selectedTab}) }> <View style={{flex:1}}><Text>{viewContent}</Text></View> </TabNavigator.Item>  ) } render() { return ( <View style={styles.container}> <TabNavigator> {this.tabNavigatorItems('tb_msg',"消息",require('../../assets/img/zhuye.png'),require("../../assets/img/zhuyesl.png"),'#622193',"","消息頁面內容")} {this.tabNavigatorItems('tb_contacts',"聯系人",require('../../assets/img/zhuye.png'),require("../../assets/img/zhuye.png"),'#65bb74',"","聯系人頁面內容")} {this.tabNavigatorItems('tb_watch',"看點",require('../../assets/img/zhuye.png'),require("../../assets/img/zhuye.png"),'#6ebef3',"","看點頁面內容")} {this.tabNavigatorItems('tb_dynamic',"動態",require('../../assets/img/zhuye.png'),require("../../assets/img/zhuye.png"),'#622193',"","動態頁面內容")} </TabNavigator> </View>  ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, myImage:{ width:22, height:22, } });

        運行：react-native run-android

     

 

 

 　運行結果：

　　

方法二：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import Home from './component/bottom/home';
import Article from './component/bottom/article';
import Order from './component/bottom/order';
import Owner from './component/bottom/owner';

const dataSource = [
                    {icon:require('./assets/img/zhuye.png'),selectedIcon:require('./assets/img/zhuyesl.png'),tabPage:'Home',tabName:'首頁',component:Home},
                    {icon:require('./assets/img/zhuye.png'),selectedIcon:require('./assets/img/zhuyesl.png'),tabPage:'Article',tabName:'文章',component:Article},
                    {icon:require('./assets/img/zhuye.png'),selectedIcon:require('./assets/img/zhuyesl.png'),tabPage:'Order',tabName:'訂單',component:Order},
                    {icon:require('./assets/img/zhuye.png'),selectedIcon:require('./assets/img/zhuyesl.png'),tabPage:'Owner',tabName:'我的',component:Owner}
                 ] 
var navigation = null;
type Props = {};
export default class App extends Component<Props> {
  constructor(props){
    super(props);
    navigation = this.props.navigation;
    this.state = {
      selectedTab:'Home'
    }
  }

  render() {
    let tabViews = dataSource.map((item,i) => {
      return (
          <TabNavigator.Item
            title={item.tabName}
            selected={this.state.selectedTab===item.tabPage}
            titleStyle={{color:'black'}}
            selectedTitleStyle={{color:'#7A16BD'}}
            renderIcon={()=><Image style={styles.tabIcon} source={item.icon}/>}
            renderSelectedIcon = {() => <Image style={styles.tabIcon} source={item.selectedIcon}/>}
            tabStyle={{alignSelf:'center'}}
            onPress = {() => {this.setState({selectedTab:item.tabPage})}}
            key={i}
            >
            <item.component  navigation={navigation}/>
        </TabNavigator.Item>
      );
    })
    return (
      <View style={styles.container}>
        <TabNavigator
          hidesTabTouch={true}
          >
            {tabViews}
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  tabIcon:{
    width:23,
    height:23,
  }
});

 

出現問題1：

　　黃色警告

　　　　解決方法：

　　　　index.js文件中，放在AppRegistry.registerComponent('App', () => App)之前即可

　　　　console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key'];

　　　　console.disableYellowBox = true // 關閉全部黃色警告