RN实现TabNavigator

来源：互联网发布：国家人社局软件编辑：程序博客网时间：2024/06/06 04:22

（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)看看数据情况）

阅读全文

0 0