ReactNative之TabNavigator（十二）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之TabNavigator

• TabBarIOS只能用于iOS平台，如果在安卓上也需要有TabBar,就不能使用TabBarIOS。
• TabNavigator:一个跨平台的TabBar组件，可以用于iOS和安卓平台
• TabNavigator：https://github.com/expo/react-native-tab-navigator

TabNavigator常用属性

TabNavigator属性.png

iOS和安卓适配

TabNavigator.png

使用

• 1.安装第三方框架

npm install react-native-tab-navigator --save

• 2.导入框架

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

• 3.使用
• 注意：renderIcon是传入一个函数，这个函数返回一个Image组件，Image通过url加载，一定要记得设置尺寸，否则不显示

render() {
        return (
            
                 }
                    onPress={() => this.setState({ selectIndex: 0 })}>
                    
                        消息
                    
                
                 }
                    onPress={() => this.setState({ selectIndex: 1 })}>
                    
                        联系人
                    
                
                 }
                    onPress={() => this.setState({ selectIndex: 2 })}>
                    
                        动态
                    
                
            
        )

    }

安卓加载图片

• 需要生成一个文件夹，名称固定drawable-xxhdpi，把图片放入这个文件夹中，然后放入安卓文件的res文件夹中

安卓图片路径.png