一共分为三段实现的
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,
}
})