react native练习

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

// }

// })