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
},
});
要传参界面
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)看看数据情况)