React Native小白(超簡單精緻的底部導航欄):使用react-native-tab-navigator實作底部導航欄（二）

實作效果如下：

  點選頂部輸入框按鈕可以實作輸入。

首先需要安裝：

npm install react-native-tab-navigator --save
           

然後在需要做導航欄的檔案引入：

下面就可以編寫頂部導航欄了，以下是完整代碼：

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

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

export default class BottomTabBar 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
      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.container1}>
        <TabNavigator>
          {this.tabNavigatorItems('tb_yinyue', "音樂館", require('./images/yinyue.png'), '#ffe09a', "1", "1")}
          {this.tabNavigatorItems('tb_bofang', "正在播放", require('./images/bofang.png'), '#65bb74', "", "")}
          {this.tabNavigatorItems('tb_xihuan', "我喜歡", require('./images/xihuan.png'), '#6ebef3', "", "")}
          {this.tabNavigatorItems('tb_tuandui', "制作團隊", require('./images/tuandui.png'), '#622193', "", "")}
        </TabNavigator>
       
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container1: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  myImage: {
    width: 22,
    height: 22,
  }
});