配置Tab欄
配置Tab欄的圖示
注意：使用圖示，需要接收 license;
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
// 匯入 Tabbar 相關的組件
import TabNavigator from 'react-native-tab-navigator'
// 匯入 Tab 欄的組件
import Home from './components/tabbars/Home.js'
import Search from './components/tabbars/Search.js'
import ShopCar from './components/tabbars/ShopCar.js'
import Me from './components/tabbars/Me.js'
// 當修改了 專案根目錄中，Android 目錄下的任何檔案之后，如果想要看專案效果，不要使用 react-native start了，而是需要再一次編譯安裝一下專案 ，運行 react-native run-android
// 匯入圖示相關的組件
import Icon from 'react-native-vector-icons/FontAwesome'
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
selectedTab: 'home' // 選中的tab欄名稱
}
}
render() {
return (
<View style={styles.container}>
{/* Tab欄區域 */}
<TabNavigator>
{/* 主頁的 Tab欄 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'home'} // 判斷當前的 tab欄是否被選中的
title="主頁" // 表示 tabbar 上展示的內容
renderIcon={() => <Icon name="home" size={25} color="gray" />} // 未選中狀態下，展示的圖示
renderSelectedIcon={() => <Icon name="home" size={25} color="#0079FF" />} // 選中狀態下展示的圖示
onPress={() => this.setState({ selectedTab: 'home' })} // 點擊Tab欄的操作
>
<Home></Home>
</TabNavigator.Item>
{/* 搜索的 Tab欄 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'search'}
title="搜索"
renderIcon={() => <Icon name="search" size={25} color="gray" />}
renderSelectedIcon={() => <Icon name="search" size={25} color="#0079FF" />}
onPress={() => this.setState({ selectedTab: 'search' })}
>
<Search></Search>
</TabNavigator.Item>
{/* 購物車的 Tab欄 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'shopcar'}
title="購物車"
badgeText="0"
renderIcon={() => <Icon name="shopping-cart" size={25} color="gray" />}
renderSelectedIcon={() => <Icon name="shopping-cart" size={25} color="#0079FF" />}
onPress={() => this.setState({ selectedTab: 'shopcar' })}
>
<ShopCar></ShopCar>
</TabNavigator.Item>
{/* Me的 Tab欄 */}
<TabNavigator.Item
selected={this.state.selectedTab === 'me'}
title="Me"
renderIcon={() => <Icon name="user" size={25} color="red" />}
renderSelectedIcon={() => <Icon name="user-o" size={25} color="#0079FF" />}
onPress={() => this.setState({ selectedTab: 'me' })}
>
<Me></Me>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
// 不推薦使用 npm 下載包，首先：下載速度慢，其次，如果是 npm 5.x，在裝新包的時候，會把一些老包洗掉
// 推薦使用 facebook 開發的 yarn 來安裝包 yarn add 包名
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17866.html
標籤：其他