android tabbar 开源,react-native-xtabbar Android和iOS通用的Tab

最新推荐文章于 2024-04-29 00:40:04 发布

weixin_39967812

最新推荐文章于 2024-04-29 00:40:04 发布

阅读量125

点赞数

文章标签： android tabbar 开源

介绍使用开源项目react-native-xtabbar。包括如何通过npm引入第三方工程，props和state的使用，以及调试React Native代码；

a4d16de07350

效果演示

这个项目最重要的一点就是Android和iOS通用。

通过tab的内容点击跳转的Second页面

切换tab时，tab内容的变化

切换tab时，消息上的小红点或数字提醒变化

使用react-native-xtabbar

React Native的依赖包时通过npm管理的，关于npm的详细介绍可以参考http://www.tuicool.com/articles/VB7nYn

我们这里启动命令行，并在工程根目录下执行以下命令

npm install 'react-native-xtabbar' --save

执行完成后，就可以在源码中使用react-native-xtabbar了。以下为主要代码片段

import TabBar from 'react-native-xtabbar';

import Second from '../Second.js';

export default class Main extends React.Component {

constructor(props) {

super(props);

this.state = {

badge: ' ',

};

}

_pressButton() {

this.props.navigator.push({

title: 'Second',

component: Second

})

}

render() {

return(

defaultPage={3}

style={styles.content}

onItemSelected={(index) => {console.log('current itemindex is ${index}');}}>

icon={require('./img/home_normal.png')}

selectedIcon={require('./img/home_selected.png')}

onPress={() => {

this.setState({badge: ' ',});

}}

title='首页'>

Home

icon={require('./img/rank_normal.png')}

selectedIcon={require('./img/rank_selected.png')}

onPress={() => {

this.setState({badge: 5,});

}}

title='排行'>

Rank

icon={require('./img/message_normal.png')}

selectedIcon={require('./img/message_selected.png')}

badge={this.state.badge}

onPress={() => {

this.setState({badge: '',});

}}

title='消息'>

Message

icon={require('./img/profile_normal.png')}

selectedIcon={require('./img/profile_selected.png')}

title='我'>

);

}

TabBar的使用，主要通过TabBar包含TabBar.Item实现

TabBar中用到的props有，defaultPage(默认显示哪个Item)，onItemSelected(Item被选中时的回调函数)

TabBar.Item中用到的props有，icon(正常状态下的图标)，selectedIcon(选中状态下的图标)，onPress(Item被点击时的回调函数，和TabBar的回调)，title(Item上显示的文字)，badge(tab上的红点或数字，这里只有message tab上定义了)

通过调试回顾state、props和component生命周期

这里的红点是随着用户交互变化的，所以将其设置为state。state会在前三个tab点击的时候通过this.setState发生变化，调用setState之后，页面会自动变化。页面的变化又会触发Component的生命周期componentWillReceiveProps。下面我们对代码稍作修改，并介绍如何调试React Native代码。

修改的代码有以下四点，具体的修改可参考源码

将第四个tab的内容改为独立的Component——Second

给Main增加一个状态test，并将该状态作为props传递给Second

给Main和Second分别增加两个生命周期函数componentWillReceiveProps和componentWillUpdate并打印日志

tab切换时修改修改状态test

// Main/index.js

componentWillReceiveProps(nextProps) {

console.log('Main componentWillReceiveProps nextProps.test:' + nextProps.test);

}

componentWillUpdate(nextProps, nextState) {

console.log('Main componentWillUpdate nextState.test:' + nextState.test);

}