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={...} //视图组件

个人笔记

你可能感兴趣的:(我的小说)