这种效果相信大家见的很多，那么是怎么实现的呢？使用的是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,})

import React,ScrollView,} from 'react-native';
 
export default class ShopInfo extends Component{
 
	constructor(props){
		super(props)
		this.state={
 
		}
	}
 
	componentDidMount(){
 
	}
 
	render(){
		return(
			<View>
				<Text>商品信息参数是:</Text>
			</View>
		);
	}
 
}

import React,WebView,} 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}}
			/>
		);
	}
}

import React,} from 'react-native';
 
export default class ShopEvaluate extends Component{
 
	render(){
		return(
			<View style={{width:50,height:50}}>
				<Text>商品评价</Text>
			</View>
		);
	}
}