import React, { Component } from 'react'
import { Platform, StyleSheet, Text, View,Image ,FlatList} from 'react-native'
// import { createBottomTabNavigator,createStackNavigator, createAppContainer } from 'react-navigation'
// import HomeScreen from './HomeScreen'
// import ProfileScreen from './SecondScreen'
// const navigator = createStackNavigator({
// Home: { screen: HomeScreen },
// Profile: { screen: ProfileScreen },
// },
// {
// initialRouteName: 'Home',
// /* The header config from HomeScreen is now here */
// defaultNavigationOptions: {
// headerStyle: {
// backgroundColor: '#f4511e',
// },
// headerTintColor: '#fff',
// headerTitleStyle: {
// fontWeight: 'bold',
// },
// },
// navigationOptions: {
// tabBarLabel: 'Home!',
// },
// }
// );
// const TabNavigator = createBottomTabNavigator({
// Home: HomeScreen,
// Profile: ProfileScreen,
// });
class Item extends Component{
render(){
let imguri='http://blog.zangzhihong.com/'+this.props.content.thumbnail;
return(
<View STYLE={{flex:1}}>
<View >
<Text style={{paddingLeft:10,fontSize:16,color: '#3f4452'}}>{this.props.content.title}</Text>
</View>
<View style={{flexDirection:'row',padding:10}}><Text>时间:{this.props.content.time}</Text><Text style={{marginLeft:10}}>分类:{this.props.content.column}</Text><Text style={{marginLeft:10}}>热度：{this.props.content.visitnumber}</Text></View>
<View style={{flexDirection:'row'}}>
<View style={{height:150,width:200}}>
<Image style={{height:150,width:200}} source={{uri:imguri}}></Image>
</View>
<View style={{flex:1,paddingLeft:10}}>
<Text numberOfLines={8} >
{this.props.content.article}
</Text>
</View>
</View>
<View style={{flexDirection:'row',justifyContent:'flex-end',marginTop:15}}><Text style={{padding:5, borderColor:'#ccc',borderWidth:1}}>阅读全文</Text></View>
</View>
)
}
}
// const App = createAppContainer(TabNavigator)
export default class App extends Component{
constructor(props){
super(props);
this.state={list:[]}
// this.getList=this.getList.bind(this)
}
componentDidMount(){
this.getList()
}
getList(){
let content ={currentPage:1,pageSize:15}
fetch('http://blog.zangzhihong.com/api/getarticle',{method:'post',body:JSON.stringify(content)}).then(response => response.json()).
then(responseJson=>{
this.setState({list:responseJson.data});
})
}
render(){
return(
<FlatList data={this.state.list
} renderItem={({item}) => <View style={{paddingLeft:10,paddingRight:10,borderBottomColor:'#fcfcfc',borderWidth:0.5}}>
<Item content={item}></Item>
</View>}
>
</FlatList>
)
}
}
// const styles = StyleSheet.create({
// container: {
// flex: 1,
// justifyContent: 'center',
// alignItems: 'center',
// backgroundColor: '#F5FCFF'
// },
// welcome: {
// fontSize: 20,
// textAlign: 'center',
// margin: 10
// },
// instructions: {
// textAlign: 'center',
// color: '#333333',
// marginBottom: 5
// }
// })
