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 (
            <TabNavigator>
                <TabNavigator.Item
                    title="消息"
                    selected={0==this.state.selectIndex}
                    renderIcon={() => <Image source={{uri:'tab_recent_nor'}} style={styles.iconStyle}/>}
                    onPress={() => this.setState({ selectIndex: 0 })}>
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                        <Text>消息</Text>
                    </View>
                </TabNavigator.Item>
                <TabNavigator.Item
                    title="联系人"
                    selected={1==this.state.selectIndex}
                    renderIcon={() => <Image source={{uri:'tab_recent_nor'}} style={styles.iconStyle}/>}
                    onPress={() => this.setState({ selectIndex: 1 })}>
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                        <Text>联系人</Text>
                    </View>
                </TabNavigator.Item>
                <TabNavigator.Item
                    title="动态"
                    selected={2==this.state.selectIndex}
                    renderIcon={() => <Image source={{uri:'tab_qworld_nor'}} style={styles.iconStyle}/>}
                    onPress={() => this.setState({ selectIndex: 2 })}>
                    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                        <Text>动态</Text>
                    </View>
                </TabNavigator.Item>
            </TabNavigator>
        )

    }

安卓加载图片

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

安卓图片路径.png