React-Native之TabBar

TabBar底部导航用法。react-native官网并没有这个组件，我们可以借助开源世界的代码，帮我们实现该功能。#TabBar开源世界

---

• 安装命令react-native-tab-navigator

npm install react-native-tab-navigator –save 

注意，进入您项目的node_modules文件夹下进行安装，其他项目需要用，可以直接拷贝react-native-tab-navigator文件夹。

• 导入

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

• 使用TabBar

双标签
<TabNavigator tabBarStyle={styles.tab}>
    <TabNavigator.Item
        key={title}
        selected={this.state.selectedTab === title}
        renderIcon={() => 
            <Image style={styles.icon} source={...} />}
        renderSelectedIcon={() => 
            <Image style={styles.icon} source={...} />}
        title={title}
        selectedTitleStyle={{color: '#45c01a'}}
        renderBadge={() =>(badge) ? 
            <View style={styles.badge}>
                <Text style={{color: '#fff'}}>{badge}</Text>
            </View> :null
        }

        onPress={() => this._pressTab(title)}
    >
        {Component}
    </TabNavigator.Item>
</TabNavigator>

• Item 属性

TabNavigator.Item //可以数组

selected={true} //表示选中TabNavigator.Item

renderIcon={图片资源} //未选中icon

title={...} //标题

selectedTitleStyle={...} //选中文字样式

renderBadge={...} //消息提示视图属性

onPress={...} //点击函数

Component={...} //视图组件

---

个人笔记