reactnative tabnavigator

最新推荐文章于 2021-06-18 09:27:42 发布

北京流年

最新推荐文章于 2021-06-18 09:27:42 发布

阅读量278

点赞数

分类专栏： react-native 文章标签： react native tabnavigator

本文链接：https://blog.csdn.net/u010648159/article/details/78780072

版权

react-native 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这种效果相信大家见的很多，那么是怎么实现的呢？使用的是reactNavigation

代码如下

import React,{Component} from 'react';
import {
	View,
	Text,
	Image,
	ActivityIndicator,
	StyleSheet,
	Dimensions,
	Animated,
	Easing
} from 'react-native';

import {
	StackNavigator,
	TabNavigator,
} from 'react-navigation'

import ShopInfo from './ShopInfo';
import ShopUrl from './ShopUrl';
import ShopEvaluate from './ShopEvaluate';

const {width,height} = Dimensions.get('window');
const tabWidthPadding = (((width)/3)-30)/2;



const MainScreen = TabNavigator({
	shopInfo:{
		screen:ShopInfo,
		navigationOptions:{
			title:'商品',
		}
	},
	shopUrl:{
		screen:ShopUrl,
		navigationOptions:{
			title:'详情'
		}
	},
	shopEvaluate:{
		screen:ShopEvaluate,
		navigationOptions:{
			title:'评价'
		}
	}
},{
	tabBarOptions:{
		activeTintColor:'#000000',
		inactiveTintColor:'#666666',
		style:{
			backgroundColor:'white',
			height:50,
		},
		indicatorStyle:{
			height:3,
			width:30,
			backgroundColor:'#fa372d',
			marginLeft:tabWidthPadding,
			marginRight:tabWidthPadding,
			justifyContent:'center'
		}
	}
});

const Shop = StackNavigator({
	mainScreen:{
		screen:MainScreen,
		navigationOptions:{
			gesturesEnabled:true,
			header:null
		}
	}
})


export default class ShopHomeInfo extends Component{

	constructor(props){
		super(props)

	}

	render(){
		const {params} = this.props.navigation.state;
		return(
			<View style={styles.container}>
				<Shop style={{flex:1}} />
			</View>
		);
	}
}

const styles = StyleSheet.create({
  container:{
  	width:width,
  	height:height,
  },
})

ShopInfo.js的代码如下

import React,{Component} from 'react';
import {
	View,
	Text,
	Image,
	ScrollView,
	ActivityIndicator,
} from 'react-native';

export default class ShopInfo extends Component{

	constructor(props){
		super(props)
		this.state={

		}
	}

	componentDidMount(){

	}

	render(){
		return(
			<View>
				<Text>商品信息参数是:</Text>
			</View>
		);
	}

}

ShopUrl.js

import React,{Component} from 'react';
import {
	View,
	Text,
	WebView,
	ActivityIndicator,
} from 'react-native';

export default class ShopUrl extends Component{

	render(){
		return(
			<WebView 
				source={{uri:'http://blog.csdn.net/u010648159/article/details/78636281'}}
				style={{flex:1}}
			/>
		);
	}
}

ShopEvaluate.js

import React,{Component} from 'react';
import {
	View,
	Text,
	ActivityIndicator,
} from 'react-native';

export default class ShopEvaluate extends Component{

	render(){
		return(
			<View style={{width:50,height:50}}>
				<Text>商品评价</Text>
			</View>
		);
	}
}

就是这么的简单，如果如果要在导航栏加上左边返回按钮，就比较麻烦了，大家可以想一想啊！！！！