前言
眼看很多公司都開始嘗試使用ReactNative,達(dá)到跨平臺(tái)開發(fā)鸿秆，最近也寫了很多文章，希望讓更多想了解的同學(xué)快速上手ReactNative.
如果喜歡我的文章捺疼，可以關(guān)注我微博:袁崢Seemygo
ReactNative之TabNavigator
- TabBarIOS只能用于iOS平臺(tái)女揭，如果在安卓上也需要有TabBar,就不能使用TabBarIOS。
- TabNavigator:一個(gè)跨平臺(tái)的TabBar組件溉仑，可以用于iOS和安卓平臺(tái)
- TabNavigator：https://github.com/expo/react-native-tab-navigator
TabNavigator常用屬性
TabNavigator屬性.png
iOS和安卓適配
TabNavigator.png
使用
- 1.安裝第三方框架
npm install react-native-tab-navigator --save
- 2.導(dǎo)入框架
import TabNavigator from 'react-native-tab-navigator';
- 3.使用
- 注意：renderIcon是傳入一個(gè)函數(shù)，這個(gè)函數(shù)返回一個(gè)Image組件状植，Image通過url加載浊竟，一定要記得設(shè)置尺寸，否則不顯示
render() {
return (
<TabNavigator>
<TabNavigator.Item
title="消息"
selected={0==this.state.selectIndex}
renderIcon={() => <Image source={{uri:'tab_recent_nor'}} style={styles.iconStyle}/>}
onPress={() => this.setState({ selectIndex: 0 })}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>消息</Text>
</View>
</TabNavigator.Item>
<TabNavigator.Item
title="聯(lián)系人"
selected={1==this.state.selectIndex}
renderIcon={() => <Image source={{uri:'tab_recent_nor'}} style={styles.iconStyle}/>}
onPress={() => this.setState({ selectIndex: 1 })}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>聯(lián)系人</Text>
</View>
</TabNavigator.Item>
<TabNavigator.Item
title="動(dòng)態(tài)"
selected={2==this.state.selectIndex}
renderIcon={() => <Image source={{uri:'tab_qworld_nor'}} style={styles.iconStyle}/>}
onPress={() => this.setState({ selectIndex: 2 })}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>動(dòng)態(tài)</Text>
</View>
</TabNavigator.Item>
</TabNavigator>
)
}
安卓加載圖片
- 需要生成一個(gè)文件夾津畸，名稱固定drawable-xxhdpi振定，把圖片放入這個(gè)文件夾中，然后放入安卓文件的res文件夾中
安卓圖片路徑.png
