React-Native學習--第三方 底部Tab react-native-tab-navigator
阿新 • • 發佈:2018-11-20
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 ( <View style={styles.container} > <TabNavigator> <TabNavigator.Item selected={this.state.selectedTab === '首頁'} title="首頁" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/ic_home_normal.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_home_checked.png")} />} onPress={() => this.setState({ selectedTab: '首頁' })}> <PosRN/> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '購物車'} title="購物車" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_normal.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_cart_checked.png")} />} onPress={() => this.setState({ selectedTab: '購物車' })}> <Cart /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/ic_user_normal.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/ic_user_checked.png")} />} onPress={() => this.setState({ selectedTab: '我的' })}> <Mine /> </TabNavigator.Item> </TabNavigator> </View> ); } } let styles = StyleSheet.create({ container: { flex: 1 }, tabText: { color: "#000000", fontSize: 13 }, selectedTabText: { color: "#999999", fontSize: 13 }, icon: { width: 20, height: 20 } });