ReactNative之TabBariOS和TabNavigator
ReactNaive相關文章
1. React Native 中文網
2. GitHub相關代碼地址
3. ReactNaive之CSS和Flex布局
4. ReactNative之基本組件
5. React Naive之ScrollView和ListView
6. React Native之導航組件NavigatorIOS和Navigator
7. ReactNative之TabBariOS和TabNavigator
注: 本文主要總結的是ReactNative的一些簡單語法, 大部分內容總結自袁大神的文章
效果圖
底部選項條.png
一. TabBarIOS
- 底部選項條, 不能跨平臺,只能iOS端使用
- 添加如下代碼, 就會出現(xiàn)底部選項條
return (
<TabBarIOS></TabBarIOS>
)
1. 相關屬性
barTintColor='yellow'
//標簽欄的背景顏色
tintColor='#ed7f30'
//當前被選中的標簽圖標的顏色
unselectedItemTintColor='#a19a9a'
//當前沒有被選中的標簽圖標的顏色。僅在iOS 10及以上版本有效
translucent={false}
//一個布爾值，決定標簽欄是否需要半透明化
//默認為true, 有透明效果
二. 選項卡: TabBarIOS.Item
-
TabBarIOS: 只是表示底部的一個選項條 -
TabBarIOS.Item: 才代表每一個選項卡 -
TabBarIOS.Item必須包裝一個View,作為點擊tabBar按鈕，切換的View
<TabBarIOS.Item title='首頁'
icon={{uri:'btn_home_normal'}}
selectedIcon={{uri:'btn_home_selected'}}
onPress={()=>{
this.setState({
selectedIndex:0
})
}}
selected={this.state.selectedIndex == 0}
>
<View style={{backgroundColor:'red', flex:1}}/>
</TabBarIOS.Item>
1. 常用屬性
badge string, number
badge='我'
badge={12}
//在圖標右上角顯示一個紅色的氣泡, 可接受string和number類型
title string
//在圖標下面顯示的標題文字。如果定義了systemIcon屬性，這個屬性會被忽略。
icon Image.propTypes.source
//給當前標簽指定一個自定義的圖標。如果定義了systemIcon屬性， 這個屬性會被忽略。
selectedIcon Image.propTypes.source
//當標簽被選中的時候顯示的自定義圖標。如果定義了systemIcon屬性，這個屬性會被忽略。如果定義了icon而沒定義這個屬性，在選中的時候圖標會染上藍色。
onPress function
//當此標簽被選中時調用。你應該修改組件的狀態(tài)來使得selected屬性為true
selected bool
//這個屬性決定了子視圖是否可見。如果你看到一個空白的頁面，很可能是沒有選中任何一個標簽
systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated')
//一些預定義的系統(tǒng)圖標。注意如果你使用了此屬性，標題和自定義圖標都會被覆蓋為系統(tǒng)定義的值。
- 只要設置對應的tabBarItem的selected為true,就會自動跳轉到對應界面
- 注意：tabBarItem的selected屬性不能寫死，可以搞個角標記錄當前選中那個角標
- 監(jiān)聽tabBarItem的點擊，修改selected屬性
- 相關示例代碼
export default class App extends Component<{}> {
constructor(props){
super(props)
this.state = {
selectedIndex:0
}
}
// 當一個組件要顯示的時候,就會自動調用render,渲染組件
render() {
return (
<TabBarIOS tintColor='#ed7f30'>
<TabBarIOS.Item title='首頁'
icon={{uri:'btn_home_normal'}}
selectedIcon={{uri:'btn_home_selected'}}
badge='我'
onPress={()=>{
this.setState({
selectedIndex:0
})
}}
selected={this.state.selectedIndex == 0}
>
<View style={{backgroundColor:'red', flex:1}}/>
</TabBarIOS.Item>
<TabBarIOS.Item title='直播'
icon={{uri:'btn_column_normal'}}
selectedIcon={{uri:'btn_column_selected'}}
badge={12}
onPress={()=>{
this.setState({
selectedIndex:1
})
}}
selected={this.state.selectedIndex == 1}
>
<View style={{backgroundColor:'yellow', flex:1}}/>
</TabBarIOS.Item>
</TabBarIOS>
)
}
}
三. TabNavigator
- TabBarIOS只能用于iOS平臺，如果在安卓上也需要有TabBar,就不能使用TabBarIOS。
- TabNavigator:一個跨平臺的TabBar第三方框架組件，可以用于iOS和安卓平臺
- TabNavigator地址
1. 安裝和導入
1-1. 安裝第三方框架
yarn add react-native-tab-navigator
1-2. 導入框架
import TabNavigator from 'react-native-tab-navigator';
2. TabNavigator常用屬性
| 屬性 | 默認值 | 類型 | 描述 |
|---|---|---|---|
| sceneStyle | inherited | object (style) | 定義渲染的場景 |
| tabBarStyle | inherited | object (style) | 為TabBar定義樣式 |
| tabBarShadowStyle | inherited | object (style) | 為TabBar定義陰影樣式 |
| hidesTabTouch | false | boolean | 禁用選項卡的onPress |
3. TabNavigator.Item常用屬性
| 屬性 | 默認值 | 類型 | 描述 |
|---|---|---|---|
| renderIcon | none | function | 選項卡圖標 |
| renderSelectedIcon | none | function | 選項卡選中狀態(tài)圖標 |
| badgeText | none | string or number | 圖標右上角顯示 |
| title | none | string | tabbar標題 |
| titleStyle | inherited | style | 標題樣式 |
| selectedTitleStyle | inherited | style | 選中狀態(tài)標題樣式 |
| tabStyle | inherited | style | 選項卡樣式 |
| hidesTabTouch | false | boolean | 是否選中該tabbar |
| onPress | none | function | 選項卡的點擊方法 |
| allowFontScaling | false | boolean | 允許標題的字體縮放 |
- 使用示例
render() {
return (
<TabNavigator>
<TabNavigator.Item title='首頁'
selected={this.state.selectedIndex == 0}
titleStyle={{color:'#9d9d9d'}}
selectedTitleStyle={{color:'#ed7f30'}}
badgeText='首頁'
allowFontScaling={false}
renderIcon={()=>
<Image source={{uri:'btn_home_normal'}} style={styles.iconStyle}/>
}
renderSelectedIcon={()=>
<Image source={{uri:'btn_home_selected'}} style={styles.iconStyle}/>
}
onPress={()=>
this.setState({
selectedIndex:0
})
}
>
<View style={[styles.viewStyle, {backgroundColor:'red'}]}>
<Text>首頁</Text>
</View>
</TabNavigator.Item>
<TabNavigator.Item title='我的'
selected={this.state.selectedIndex == 1}
titleStyle={{color:'#9d9d9d'}}
selectedTitleStyle={{color:'#ed7f30'}}
badgeText={10}
renderIcon={()=>
<Image source={{uri:'btn_user_normal'}} style={styles.iconStyle}/>
}
renderSelectedIcon={()=>
<Image source={{uri:'btn_user_selected'}} style={styles.iconStyle}/>
}
onPress={()=>
this.setState({
selectedIndex:1
})
}
>
<View style={[styles.viewStyle, {backgroundColor:'green'}]}>
<Text>我的</Text>
</View>
</TabNavigator.Item>
</TabNavigator>
)
}
}
