ReactNative之TabBariOS和TabNavigator

ReactNative之TabBariOS和TabNavigator

ReactNaive相关文章

1. React Native 中文网

2. GitHub相关代码地址

3. ReactNaive之CSS和Flex布局

4. ReactNative之基本组件

5. React Naive之ScrollView和ListView

6. React Native之导航组件NavigatorIOS和Navigator

7. ReactNative之TabBariOS和TabNavigator

---

注: 本文主要总结的是ReactNative的一些简单语法, 大部分内容总结自袁大神的文章

效果图

一. TabBarIOS

• 底部选项条, 不能跨平台,只能iOS端使用
• 添加如下代码, 就会出现底部选项条

    return (
        <TabBarIOS></TabBarIOS>
    )        

1. 相关属性

barTintColor='yellow'
//标签栏的背景颜色

tintColor='#ed7f30'
//当前被选中的标签图标的颜色

unselectedItemTintColor='#a19a9a'
//当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效

translucent={false} 
//一个布尔值，决定标签栏是否需要半透明化
//默认为true, 有透明效果

二. 选项卡: TabBarIOS.Item

• TabBarIOS: 只是表示底部的一个选项条
• TabBarIOS.Item: 才代表每一个选项卡
• TabBarIOS.Item必须包装一个View,作为点击tabBar按钮，切换的View

                <TabBarIOS.Item title='首页'
                                icon={{uri:'btn_home_normal'}}
                                selectedIcon={{uri:'btn_home_selected'}}
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:0
                                    })
                                }}
                                selected={this.state.selectedIndex == 0}
                >
                    <View style={{backgroundColor:'red', flex:1}}/>
                </TabBarIOS.Item>

1. 常用属性

badge string, number 
badge='我'
badge={12}
//在图标右上角显示一个红色的气泡, 可接受string和number类型

title string 
//在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略。

icon Image.propTypes.source 
//给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略。

selectedIcon Image.propTypes.source 
//当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。

onPress function 
//当此标签被选中时调用。你应该修改组件的状态来使得selected属性为true

selected bool 
//这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签

systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') 
//一些预定义的系统图标。注意如果你使用了此属性，标题和自定义图标都会被覆盖为系统定义的值。

• 只要设置对应的tabBarItem的selected为true,就会自动跳转到对应界面
  
  • 注意：tabBarItem的selected属性不能写死，可以搞个角标记录当前选中那个角标
• 监听tabBarItem的点击，修改selected属性
• 相关示例代码

export default class App extends Component<{}> {
    constructor(props){
        super(props)
        this.state = {
            selectedIndex:0
        }
    }

    // 当一个组件要显示的时候,就会自动调用render,渲染组件
    render() {
        return (
            <TabBarIOS tintColor='#ed7f30'>
                <TabBarIOS.Item title='首页'
                         icon={{uri:'btn_home_normal'}}
                                selectedIcon={{uri:'btn_home_selected'}}
                                badge='我'
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:0
                                    })
                                }}
                                selected={this.state.selectedIndex == 0}
                >
                    <View style={{backgroundColor:'red', flex:1}}/>
                </TabBarIOS.Item>

                <TabBarIOS.Item title='直播'
                                icon={{uri:'btn_column_normal'}}
                                selectedIcon={{uri:'btn_column_selected'}}
                                badge={12}
                                onPress={()=>{
                                    this.setState({
                                        selectedIndex:1
                                    })
                                }}
                                selected={this.state.selectedIndex == 1}
                >
                    <View style={{backgroundColor:'yellow', flex:1}}/>
                </TabBarIOS.Item>
            </TabBarIOS>
        )
    }
}

三. TabNavigator

• TabBarIOS只能用于iOS平台，如果在安卓上也需要有TabBar,就不能使用TabBarIOS。
• TabNavigator:一个跨平台的TabBar第三方框架组件，可以用于iOS和安卓平台
• TabNavigator地址

1. 安装和导入

1-1. 安装第三方框架

yarn add react-native-tab-navigator

1-2. 导入框架

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

2. TabNavigator常用属性

属性	默认值	类型	描述
sceneStyle	inherited	object (style)	定义渲染的场景
tabBarStyle	inherited	object (style)	为TabBar定义样式
tabBarShadowStyle	inherited	object (style)	为TabBar定义阴影样式
hidesTabTouch	false	boolean	禁用选项卡的onPress

3. TabNavigator.Item常用属性

属性	默认值	类型	描述
renderIcon	none	function	选项卡图标
renderSelectedIcon	none	function	选项卡选中状态图标
badgeText	none	string or number	图标右上角显示
title	none	string	tabbar标题
titleStyle	inherited	style	标题样式
selectedTitleStyle	inherited	style	选中状态标题样式
tabStyle	inherited	style	选项卡样式
hidesTabTouch	false	boolean	是否选中该tabbar
onPress	none	function	选项卡的点击方法
allowFontScaling	false	boolean	允许标题的字体缩放

• 使用示例

render() {
        return (
            <TabNavigator>
                <TabNavigator.Item title='首页'
                                   selected={this.state.selectedIndex == 0}
                                   titleStyle={{color:'#9d9d9d'}}
                                   selectedTitleStyle={{color:'#ed7f30'}}
                                   badgeText='首页'
                                   allowFontScaling={false}
                                   renderIcon={()=>
                                       <Image source={{uri:'btn_home_normal'}} style={styles.iconStyle}/>
                                   }
                                   renderSelectedIcon={()=>
                                       <Image source={{uri:'btn_home_selected'}} style={styles.iconStyle}/>
                                   }
                                   onPress={()=>
                                       this.setState({
                                           selectedIndex:0
                                       })
                                   }
                >
                    <View style={[styles.viewStyle, {backgroundColor:'red'}]}>
                        <Text>首页</Text>
                    </View>
                </TabNavigator.Item>

                <TabNavigator.Item title='我的'
                                   selected={this.state.selectedIndex == 1}
                                   titleStyle={{color:'#9d9d9d'}}
                                   selectedTitleStyle={{color:'#ed7f30'}}
                                   badgeText={10}
                                   renderIcon={()=>
                                       <Image source={{uri:'btn_user_normal'}} style={styles.iconStyle}/>
                                   }
                                   renderSelectedIcon={()=>
                                       <Image source={{uri:'btn_user_selected'}} style={styles.iconStyle}/>
                                   }
                                   onPress={()=>
                                       this.setState({
                                           selectedIndex:1
                                       })
                                   }
                >
                    <View style={[styles.viewStyle, {backgroundColor:'green'}]}>
                        <Text>我的</Text>
                    </View>

                </TabNavigator.Item>
            </TabNavigator>
        )
    }
}