APP中底部中常用的nav导航,可以使用react-native-tab-navigator
安装:
yarn add react-native-tab-navigator
引入:
import TabNavigator from 'react-native-tab-navigator';
配置说明:
selectedTab
记录选中状态selectedTitleStyle
选中文字的样式renderSelectedIcon
图标的颜色,颜色属性为tintColor
badgeText
图标上显式的数字
代码示例:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
export default class github extends Component {
constructor() {
super();
this.state = {
selectedTab: 'tb_popular'
}
}
render() {
return (
<View style={styles.container}>
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_popular'}
title="最热"
selectedTitleStyle={{color:'red'}}
renderIcon={() => <Image style={styles.img} source={require('./res/images/ic_polular.png')} />}
renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'red'}]} source={require('./res/images/ic_polular.png')} />}
badgeText="1"
onPress={() => this.setState({ selectedTab: 'tb_popular' })}>
<View style={styles.page1}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_trending'}
title="趋势"
selectedTitleStyle={{color:'yellow'}}
renderIcon={() => <Image style={styles.img} style={styles.img} source={require('./res/images/ic_trending.png')} />}
renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'yellow'}]} source={require('./res/images/ic_trending.png')} />}
onPress={() => this.setState({ selectedTab: 'tb_trending' })}>
<View style={styles.page2}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_favorite'}
title="收藏"
selectedTitleStyle={{color:'yellow'}}
renderIcon={() => <Image style={styles.img} style={styles.img} source={require('./res/images/ic_favorite.png')} />}
renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'yellow'}]} source={require('./res/images/ic_favorite.png')} />}
onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
<View style={styles.page2}></View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'tb_my'}
title="我的"
selectedTitleStyle={{color:'yellow'}}
renderIcon={() => <Image style={styles.img} style={styles.img} source={require('./res/images/ic_my.png')} />}
renderSelectedIcon={() => <Image style={[styles.img,{tintColor:'yellow'}]} source={require('./res/images/ic_my.png')} />}
onPress={() => this.setState({ selectedTab: 'tb_my' })}>
<View style={styles.page2}></View>
</TabNavigator.Item>
</TabNavigator>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
page1: {
flex: 1,
backgroundColor: 'red'
},
page2: {
flex: 1,
backgroundColor: 'yellow'
},
img:{
width: 22,
height: 22
}
});
AppRegistry.registerComponent('github', () => github);