React Native学习之底部标签栏TabBar(六)

1、大多数app的首页都会有底部标签栏，用于切换不同的功能模块，在React Native中，我使用的是react-native-tab-navigator组件
2、首先在Main.js中导入TabNavigator

import TabNavigator from 'react-native-tab-navigator';

3、然后编写代码，代码也是很简单

const tab_cs = require('../images/icon_cs.png')
const tab_cs_selected = require('../images/icon_cs_check.png')
const tab_yunshi = require('../images/icon_yunshi.png')
const tab_yunshi_selected = require('../images/icon_yunshi_check.png')
const tab_zixun = require('../images/icon_zixun.png')
const tab_zixun_selected = require('../images/icon_zixun_check.png')
export default class Main extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'cs',
        }
    }

    // state = {
    //     selectedTab: 'home'
    // };

    render() {
        return (
            <TabNavigator style={styles.container}>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'cs'}
                    title="测算"
                    titleStyle={{color: "#323232"}}
                    selectedTitleStyle={{color: "#1e9dff"}}
                    renderIcon={() => <Image source={tab_cs} style={styles.icon}/>}
                    renderSelectedIcon={() => <Image source={tab_cs_selected} style={styles.icon}/>}
                    onPress={() => this.setState({selectedTab: 'cs'})}>
                    <CSComponent nav={this.props.nav}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'yunshi'}
                    title="运势"
                    titleStyle={{color: "#323232"}}
                    selectedTitleStyle={{color: "#1e9dff"}}
                    renderIcon={() => <Image source={tab_yunshi} style={styles.icon}/>}
                    renderSelectedIcon={() => <Image source={tab_yunshi_selected} style={styles.icon}/>}
                    onPress={() => this.setState({selectedTab: 'yunshi'})}>
                    <YSComponent nav={this.props.nav}/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'zixun'}
                    title="资讯"
                    titleStyle={{color: "#323232"}}
                    selectedTitleStyle={{color: "#1e9dff"}}
                    renderIcon={() => <Image source={tab_zixun} style={styles.icon}/>}
                    renderSelectedIcon={() => <Image source={tab_zixun_selected} style={styles.icon}/>}
                    onPress={() => this.setState({selectedTab: 'zixun'})}>
                    <ZXComponent
                        nav={this.props.nav}
                    />
                </TabNavigator.Item>
            </TabNavigator>
        );
    }
}
AppRegistry.registerComponent('Main', () => Main);

4、上面代码中的CSComponent、YSComponent、ZXComponent就是分别对应的三个标签页，注意一点就是，因为这三个组件不是通过navigator进行跳转的，因此，在这三个组件中获取不到navigator，也就无法实现页面跳转功能，需要把navigator通过props传进去；
5、看看效果，只能说RN的开发处处都是坑，android中的banner图片没显示出来有点奇怪(解决了，把ViewpagerAndroid嵌套在Flatlist或者ListView中，需要flatlist设置removeClippedSubviews={false})：

android.gif
iphone1.gif