介绍使用开源项目react-native-xtabbar。包括如何通过npm引入第三方工程，props和state的使用，以及调试React Native代码；
效果演示
这个项目最重要的一点就是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(
<View style={styles.container}>
<TabBar
defaultPage={3}
style={styles.content}
onItemSelected={(index) => {console.log('current itemindex is ${index}');}}>
<TabBar.Item
icon={require('./img/home_normal.png')}
selectedIcon={require('./img/home_selected.png')}
onPress={() => {
this.setState({badge: ' ',});
}}
title='首页'>
<View style={styles.text}>
<Text style={{fontSize: 18}}>Home</Text>
</View>
</TabBar.Item>
<TabBar.Item
icon={require('./img/rank_normal.png')}
selectedIcon={require('./img/rank_selected.png')}
onPress={() => {
this.setState({badge: 5,});
}}
title='排行'>
<View style={styles.text}>
<Text style={{fontSize: 18}}>Rank</Text>
</View>
</TabBar.Item>
<TabBar.Item
icon={require('./img/message_normal.png')}
selectedIcon={require('./img/message_selected.png')}
badge={this.state.badge}
onPress={() => {
this.setState({badge: '',});
}}
title='消息'>
<View style={styles.text}>
<Text style={{fontSize: 18}}>Message</Text>
</View>
</TabBar.Item>
<TabBar.Item
icon={require('./img/profile_normal.png')}
selectedIcon={require('./img/profile_selected.png')}
title='我'>
<View style={styles.text}>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text style={{fontSize: 18}}>Me</Text>
</TouchableOpacity>
</View>
</TabBar.Item>
</TabBar>
</View>
);
}
}
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);
}
render(){
return(
<View ....
....
<TabBar.Item
icon={require('./img/profile_normal.png')}
selectedIcon={require('./img/profile_selected.png')}
title='我'>
<View style={styles.text}>
<Second test={this.state.test} />
</View>
</TabBar.Item>
</TabBar>
</View>
);
}
}
// Second.js
componentWillReceiveProps(nextProps) {
console.log('Second componentWillReceiveProps nextProps.test:' + nextProps.test);
}
componentWillUpdate(nextProps, nextState) {
console.log('Second componentWillUpdate nextProps.test:' + nextProps.test);
}
在Mac上通过command＋D并选择Debug JS Remotely开启调试模式
打开调试模式
系统会自动在Chrome中打开调试页面，在右侧的Console中就可以看到我们打印的日志
调试模式
依次点击4个tab，可以在console区域看到如下log。前三次点击的调用次序都为
- Main componentWillUpdate，nextState为setState中设置的状态，nextProps无效
- Second componentWillReceiveProps，nextProps.test为在Main中使用Second是传递的参数test
- Second componentWillUpdate，这里的nextProps有效，而nextState没有变化
通过这个例子可以直观的看到单向的信息流是怎么通过Component的生命周期引起界面变化的。如果Second中的props.test和界面的显示有关，则会自动刷新到界面上。
调试信息
补充信息
react-native-xtabbar的最新代码目前还没有发布到npm上，所以TabBar的隐藏，通过代码调用切换Tab等功能还无法使用。
如果需要使用这些功能，可以用项目在github的源码覆盖本地node_modules中对应的文件。
