RN實現TabNavigator

(1)實現

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    //Navigator,
    Image
} from 'react-native';

import Home from '../home/GDHome';
import HourList from '../hourList/GDHourList';
import Ht from '../ht/GDHt';

//import Navigator from 'react-native-deprecated-custom-components';
import NavigationExperimental from 'react-native-deprecated-custom-components';
import TabNavigator from 'react-native-tab-navigator';

export default class GDMain extends Component {

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

    renderTabBarItem(title, selectedTab, image, imageSelect, component) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTab}
                title={title}
                renderIcon={() => <Image source={{uri: image}} style={styles.tabBarIcon}/>}
                renderSelectedIcon={() => <Image source={{uri: imageSelect}} style={styles.tabBarIcon}/>}
                selectedTitleStyle={{color: 'black'}}
                //badgeText="1"
                onPress={() => this.setState({selectedTab: selectedTab})}>

                <NavigationExperimental.Navigator
                    initialRoute={{
                        name: selectedTab,
                        component: component
                    }}
                    // initialRoute 這個指定了默認的頁面,也就是啓動app之後會看到界面的第一屏。 需要填寫兩個參數: name 跟 component。

                    // http://blog.csdn.net/oiken/article/details/50459321
                    // 可以根據這個來進行跳轉傳參
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return <Component {...route.params} navigator={navigator}/>
                    }}
                />
            </TabNavigator.Item>
        )
    }

    render() {
        return (
            <TabNavigator>
                {this.renderTabBarItem('主頁', 'home', 'tabbar_home_30x30', 'tabbar_home_selected_30x30', Home)}
                {this.renderTabBarItem('海淘', 'ht', 'tabbar_abroad_30x30', 'tabbar_abroad_selected_30x30', Ht)}
                {this.renderTabBarItem('小時風雲榜', 'hourlist', 'tabbar_rank_30x30', 'tabbar_rank_selected_30x30', HourList)}
            </TabNavigator>
        );
    }
}

const styles = StyleSheet.create({
    tabBarIcon: {
        width: 30,
        height: 30
    },
});

(2)傳參

要傳參界面

pushToHalfHourHot() {
        this.props.navigator.push({
            name: 'abc',
            component: HalfHourHot,
            params: {
                user: 'hhh',
            }
        });
    };

要接收參數界面

componentDidMount() {
        this.setState({
            name: this.props.user,
        });
    };

this.props.user才能訪問到(網上的全錯的,也有可能是版本更新導致的。實在不清楚就先用console.log(this.props)看看數據情況)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章