rn 中tab的实现

一共分为三段实现的  

PopularPage -》PopularTab -》 RepositoryCell

HomePage.js 

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Image,ListView,Text} from 'react-native';
import NavigationBar from "../common/NavigationBar"
import TabNavigator from "react-native-tab-navigator";
import PopularPage from './PopularPage'
export default class HomePage extends Component{
  constructor(props){
    super(props);
    this.state={
      selectedTab:'tb_popular',
    }
  }
  render(){
    return(
        <View style={styles.container}>
         <TabNavigator>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_popular'}
              selectedTitleStyle={{color:'#2196f3'}}
              title="最热"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_polular.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196f3'}]} source={require('../../res/images/ic_polular.png')} />}
              badgeText="1"
              onPress={() => this.setState({ selectedTab: 'tb_popular' })}>
            <PopularPage/>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_trending'}
              selectedTitleStyle={{color:'#2196f3'}}
              title="趋势"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_trending.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196f3'}]} source={require('../../res/images/ic_trending.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_trending' })}>
            <View style={styles.page2}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_favorite'}
              selectedTitleStyle={{color:'#2196f3'}}
              title="收藏"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_unstar_navbar.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196f3'}]} source={require('../../res/images/ic_unstar_navbar.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_favorite' })}>
            <View style={styles.page3}></View>
          </TabNavigator.Item>
          <TabNavigator.Item
              selected={this.state.selectedTab === 'tb_my'}
              selectedTitleStyle={{color:'#2196f3'}}
              title="我的"
              renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_my.png')} />}
              renderSelectedIcon={() => <Image style={[styles.image,{tintColor:'#2196f3'}]} source={require('../../res/images/ic_my.png')} />}
              onPress={() => this.setState({ selectedTab: 'tb_my' })}>
            <View style={styles.page4}></View>
          </TabNavigator.Item>
        </TabNavigator>
        </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#2196f3',
  },
  page1:{
    flex:1,
    backgroundColor:'#2196f3',
  },
  page2:{
    flex:1,
    backgroundColor:'#2196f3',
  },
  page3:{
    flex:1,
    backgroundColor:'#2196f3',
  },
  page4:{
    flex:1,
    backgroundColor:'#2196f3',
  },
  image:{
    width:22,
    height:22
  }
});

2, PopularPage

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Image,ListView,Text,TextInput,RefreshControl} from 'react-native';
import NavigationBar from "../common/NavigationBar"
import DataNetRepository from '../util/DataRepository'
import ScrollableTabView,{ScrollableTabBar,DefaultTabBar} from 'react-native-scrollable-tab-view';  // tab
import RepositortCell from '../common/RepositoryCell'  //样式


// 分为三段  PopularPage -》PopularTab -》 RepositoryCell
export default class  PopularPage extends Component{
  constructor(props){
    super(props)
    this.state={
      text:'holder',
      input:'',
    }

  }

   render(){
     return(<View  style={styles.container}>
       <NavigationBar
           title='最热'
           style={{backgroundColor:'#2196f3'}}
       />
       <ScrollableTabView
           renderTabBar={()=><ScrollableTabBar/>}
           tabBarBackgroundColor='#2196f3'
           tabBarInactiveTextColor='red'
           tabBarActiveTextColor='yellow'
           tabBarUnderlineStyle={{backgroundColor:'#e7e7e7',height:2}}
       >
         <PopularTab tabLabel="js" />
         <PopularTab tabLabel="java" />
         <PopularTab tabLabel="php" />
         <PopularTab tabLabel="c" />
       </ScrollableTabView>

     </View>)
   }
}

class PopularTab extends Component{
  constructor(props){
    super(props)
    const ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
    this.state={
      result:'',
      dataSource:ds,
      isLoading:true
    }
    this.DataFetch =new DataNetRepository();
  }
  getUrl(data){
    return `https://api.github.com/search/repositories?q=${data}&sort=stars`
  }
  componentDidMount(){
    this.onPress();
  }
  renderRows(item){
    return <RepositortCell item={item} />
  }
  onPress(){
    this.setState({isLoading:true})
    url = this.getUrl(this.props.tabLabel)
    this.DataFetch.DataNetRepository(url)
        .then(res=>{this.setState({dataSource:this.state.dataSource.cloneWithRows(res.items),isLoading:false})})
        .catch(e=>{this.setState({dataSource:e,isLoading:false})})
  }
  render(){
    return(<View style={styles.container}>
      <ListView
          dataSource={this.state.dataSource}//关联state中的datasource
          renderRow={(item) =>this.renderRows(item)}//制定listView的显示效果 返回 函数的执行结果
          refreshControl={<RefreshControl       // 下拉刷新的组件
              refreshing={this.state.isLoading}   // 是否 刷新中
            onRefresh={()=>this. onPress}   // 操作刷新时 的钩子函数
              tintColor={"#2196f3"}  // ios的写法 安卓的还有另外的写法
              title={"loading"}
              titleColor={"#2196f3"}
          />}
      />
    </View>)
  }
}


const styles =  StyleSheet.create({
  container:{
    flex:1,
  },
  text:{
    fontSize:20,

  },
  textTab:{
    color:'black'
  }
})

3, RepositoryCell

import React, {Component} from 'react';
import {Platform, StyleSheet, View, Image,ListView,Text,TextInput,TouchableOpacity} from 'react-native';

export default class RepositoryCell extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
        <TouchableOpacity style={styles.container}>
        <View style={styles.cell_container}>
      <Text style={styles.title}>{this.props.item.full_name}</Text>
      <Text style={styles.description}>{this.props.item.description}</Text>
      <View style = {{flexDirection:"row",justifyContent:'space-between'}}>
        <View style = {{flexDirection:"row",alignItems:'center'}}>
            <Text>author:</Text>
            <Image  style={{height:20,width:20}} source={{url:this.props.item.owner.avatar_url}}/>
        </View>
        <View style = {{flexDirection:"row",alignItems:'center'}}>
            <Text>stars:</Text>
            <Text>{this.props.item.stargazers_count}</Text>
        </View>
        <Image style={{height:20,width:20}} source={require('../../res/images/ic_star.png')} />
      </View>

        </View></TouchableOpacity>)
  }
}
const styles =  StyleSheet.create({
  container:{
    flex:1,
  },
  text:{
    fontSize:20,

  },
  textTab:{
    color:'black'
  },
  title:{
    fontSize:16,
    marginBottom:2,
    color:'#212121',
  },
  description:{
    fontSize:14,
    marginBottom:2,
    color:'#212121',
  },
  cell_container:{
    backgroundColor:'white',
    marginLeft:5,
    marginRight:5,
    marginVertical:3,
    padding:10,
    borderWidth:0.5,
    borderColor:'#dddddd',
    borderRadius:5,
    shadowColor:'gray',
    shadowOffset:{width:1,height:1},
    shadowOpacity:0.5,
    shadowRadius:1,
  }
})