zoukankan      html  css  js  c++  java
  • react-native 项目实战 -- 新闻客户端(3) -- 包装导航控制器

    1.修改后的 Main.js

    /**
     * 主页面
     */
    import React, { Component } from 'react';
    import {
        StyleSheet,
        Text,
        View,
        Image,
        Platform,  //判断当前运行的系统
    } from 'react-native';
    
    /*=============导入外部组件类==============*/
    import TabNavigator from 'react-native-tab-navigator';
    import CustomerComponents, { Navigator } from 'react-native-deprecated-custom-components';
    
    // 引入外部的组件(此处注意是相当于了项目根目录)
    var Home = require('../Component/Home');
    var Message = require('../Component/Message');
    var Find = require('../Component/Find');
    var Mine = require('../Component/Mine');
    
    // ES5
    var Main = React.createClass({
        // 初始化函数(变量是可以改变的,充当状态机的角色)
        getInitialState(){
            return{
                selectedTab:'home' // 默认选中的tabBar
            }
        },
    
        render() {
            return (
                <TabNavigator>
                    {/*--首页--*/}
                    {this.renderTabBarItem('首页','icon_tabbar_home','icon_tabbar_home_selected','home','首页',Home,1)}
                    {/*--消息--*/}
                    {this.renderTabBarItem('消息','icon_tabbar_message','icon_tabbar_message_selected','message','消息',Message,2)}
                    {/*--发现--*/}
                    {this.renderTabBarItem('发现','icon_tabbar_find','icon_tabbar_find_selected','find','发现',Find)}
                    {/*--我的--*/}
                    {this.renderTabBarItem('我的','icon_tabbar_mine','icon_tabbar_mine_selected','mine','我的',Mine)}
                </TabNavigator>
            );
        },
    
        // 封装tabBarItem
        renderTabBarItem(title,iconName,selectedIconName,selectedTab,componentName,component,badgeText){
            return(
                <TabNavigator.Item
                    title={title}
                    renderIcon={() => <Image source={{uri:iconName}} style={styles.iconStyle} />}
                    renderSelectedIcon={() => <Image source={{uri:selectedIconName}} style={styles.iconStyle} />}
                    selected={this.state.selectedTab === selectedTab}
                    onPress={() => this.setState({ selectedTab: selectedTab })}
                    selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式
                    badgeText={badgeText}
                >
                    <Navigator
                        initialRoute={{name: componentName, component:component}}
                        configureScene={()=>{
                            return Navigator.SceneConfigs.PushFromRight;
                        }}
                        renderScene={(route, navigator) =>{
                            let Component = route.component;
                            return <Component {...route.passProps} navigator={navigator} />
                        }}
                    />
                </TabNavigator.Item>
            )
        }
    });
    
    const styles = StyleSheet.create({
        // icon默认样式
        iconStyle:{
             Platform.OS === 'ios' ? 30 : 25,
            height:Platform.OS === 'ios' ? 30 : 25,
        },
        // tabBarItem选中的文字样式
        selectedTitleStyle:{
            color: 'rgba(212,97,0,1)',
        }
    });
    
    // 输出
    module.exports = Main;
    

    2.效果图

    .

  • 相关阅读:
    数据结构--窗口内最大值最小值的更新结构(单调双向队列)
    数据结构--BFPRT算法(TOP-K算法)
    数据结构--KMP算法(字符串匹配算法)--树的子结构
    数据结构--Manacher算法(最长回文子串)--生成最短回文串
    数据结构--KMP算法(字符串匹配算法)--在末尾添加字符串,是其包含字符串两次,且长度最短
    数据结构--Manacher算法(最长回文子串)
    数据结构--KMP算法(字符串匹配算法)
    剑指offer——和为S的连续正数序列
    剑指offer——删除链表中重复的结点
    XML DOM解析 基础概念
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7265086.html
Copyright © 2011-2022 走看看