ReactNative入门篇之react-native-tab-navigator使用

1、首先安装好ReactNative的运行环境，安装组件依赖库

使用npm install react-native-tab-navigator --save安装所依赖的第三方库

2、导入

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

3、使用

               
                     }
                        renderSelectedIcon={() => }//设置图标选中颜色
                        // badgeText="1"
                        onPress={() => this.setState({ selectedTab: 'home' })}>
                        
                            这是首页
                        
                    
                     }
                        renderSelectedIcon={() => }
                        // renderBadge={() => }
                        onPress={() => this.setState({ selectedTab: 'shebei' })}>
                        
                            设备列表
                        
                    
                     }
                        renderSelectedIcon={() => }
                        // renderBadge={() => }
                        onPress={() => this.setState({ selectedTab: 'hetong' })}>
                        
                            合同管理
                        
                    
                     }
                        renderSelectedIcon={() => }
                        // renderBadge={() => }
                        onPress={() => this.setState({ selectedTab: 'qiye' })}>
                        
                            个人中心
                        
                    
                

还需要在构造方法中初始化数据，默认让第一个tab选中

    constructor(props) {
        super(props);
        this.state = {selectedTab: "home"}
    }

4、运行结果

运行截图.png