ReactNative-TabBariOS/TabNavigat

一、TabBarIOS常用属性

barTintColor:背景颜色
style：样式
tintColor：被选中的图标颜色
unselectedItemTintColor：未被选中的图标颜色（iOS10以上有效）
translucent：布尔值，是否需要半透明

二、选项卡，TabBarIOS.Item

• TabBarIOS.Item必须包含一个View，作为点击选项卡的切换项

<TabBarIOS.Item>
        <View style={{backgroundColor:'red',flex:1}}></View>
 </TabBarIOS.Item>

• TabBarIOS.Item常用属性

badge: 右上角的数字标
icon：未选中时候的自定义图标
title：自定义标题文字
selectedIcon：选中时候的自定义图标
onPress：标签被选中时候调用
selected：子视图是否可见
systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') : 系统图标

• TabBarIOS.Item的selected为true的时候，该页面被选中，但是 属性值不能写死，我们可以声明一个索引来记录选中页面，当选中某个Item，就改变索引

   constructor(props){
        super(props);
        this.state = {
            selectIndex:0
        }
    }
    onPress={()=>{
          this.setState({
              selectIndex:0
          })
     }}
    selected={0==this.state.selectIndex}

TabBariOS完整使用代码示例：

import React, {Component} from 'react'
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Button,
    TextInput,
    Image,
    Dimensions,
    TabBarIOS
}
    from 'react-native'
class ReactDemo extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectedIndex:0
        }
    }
    render(){
        return (
            <TabBarIOS>

                <TabBarIOS.Item title='消息'
                                icon={{uri:'tab_recent_nor'}}
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:0
                                    })
                                }}
                                selected={this.state.selectedIndex == 0}
                                badge={10}
                >
                    <View style={{backgroundColor:'red',flex:1}}></View>
                </TabBarIOS.Item>

                <TabBarIOS.Item title='动态'
                                icon={{uri:'tab_qworld_nor'}}
                                selected={this.state.selectedIndex == 1}
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:1
                                    })
                                }}
                >
                    <View style={{backgroundColor:'blue',flex:1}}></View>
                </TabBarIOS.Item>

            </TabBarIOS>
        )
    }
}
var styles = StyleSheet.create({
})
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo);

TabNavigator

• TabBarIOS只能用于iOS平台，TabNavigator可跨平台

TabNavigator完整使用代码示例：

import React, {Component} from 'react'
import
{
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Button,
    TextInput,
    Image,
    Dimensions
}
    from 'react-native'
import TabNavigator from 'react-native-tab-navigator';
// renderIcon: 传入一个函数,返回值 Image组件
class ReactDemo extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectedIndex:0
        }
    }
    render(){
        return (
            <TabNavigator >
                <TabNavigator.Item
                    selected={this.state.selectedIndex == 0}
                    title="消息"
                    renderIcon={() => <Image source={{uri:'tab_recent_nor'}} style={{width:25,height:25}}/>}
                    badgeText="10"
                    selectedTitleStyle={{color:'orange'}}
                    onPress={() => {
                        this.setState({
                            selectedIndex:0
                        })
                    }}
                >
                    {/*存放一个组件*/}
                    <View style={{backgroundColor:'green',flex:1}}/>
                </TabNavigator.Item>

                <TabNavigator.Item
                    title="联系人"
                    renderIcon={() => <Image source={{uri:'tab_buddy_nor'}} style={{width:25,height:25}}/>}
                    onPress={() => {
                        this.setState({
                            selectedIndex:1
                        })
                    }}
                    selected={this.state.selectedIndex == 1}
                >
                    {/*存放一个组件*/}
                    <View style={{backgroundColor:'red',flex:1}}/>
                </TabNavigator.Item>
        )
    }
}
var styles = StyleSheet.create({
})
AppRegistry.registerComponent('ReactDemo',()=>ReactDemo);