React-Native基础_5.列表视图ListView 网络数据展示

前端之家收集整理的这篇文章主要介绍了React-Native基础_5.列表视图ListView 网络数据展示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. //获取网络数据 并用列表展示 豆瓣Top250 api
  2. /**
  3. * Sample React Native App
  4. * https://github.com/facebook/react-native
  5. * @flow
  6. */
  7. 'use strict'
  8. import React,{Component} from 'react';
  9. import {
  10. AppRegistry,StyleSheet,Text,Image,View,ListView,} from 'react-native';
  11. //import {AppRegistry,} from 'react-native';
  12. //import Day0718 from './componets/Home'
  13.  
  14. let REQUEST_URL = 'https://api.douban.com/v2/movie/top250';
  15. export default class Day0718 extends Component {
  16. constructor(props) {
  17. super(props);
  18. this.state = {
  19. dataSource:new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}),loaded: false,};
  20. }
  21. componentDidMount(){
  22. this._fetchData();
  23. }
  24. _fetchData(){
  25. fetch(REQUEST_URL)
  26. .then(response => response.json())
  27. .then(responseData =>{
  28. this.setState({
  29. movies:this.state.dataSource.cloneWithRows(responseData.subjects),loaded: true,});
  30. })
  31. .done();
  32. }
  33. render() {
  34. if(!this.state.loaded){
  35. return this._renderLoadingView();
  36. }
  37. return (
  38. <View style={styles.Container}>
  39. <ListView
  40. dataSource={this.state.movies}
  41. renderRow={this._renderMovieList}
  42. style={styles.listView}
  43.  
  44. />
  45. </View>
  46. );
  47. }
  48. _renderMovieList(movie){
  49. return(
  50. <View style = {styles.item}>
  51. <View style = {styles.itemImage}>
  52. <Image
  53. style ={styles.image}
  54. source ={{uri:movie.images.large}}/>
  55. </View>
  56. <View style = {styles.itemContent}>
  57. <Text style ={styles.itemHeader}>{movie.title}</Text>
  58. <Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text>
  59. <Text style ={styles.redText}>{movie.rating.average}</Text>
  60.  
  61. </View>
  62. </View>
  63. );
  64. };
  65. _renderLoadingView(){
  66. return (
  67. <View style ={styles.loading}>
  68. <Text > loading movies.....</Text>
  69. </View>
  70. );
  71. };
  72.  
  73. }
  74. const styles = StyleSheet.create({
  75. item:{
  76. flexDirection:'row',borderBottomWidth:1,borderColor:'rgba(100,53,201,0.1)',paddingBottom:6,marginBottom:6,flex:1,},itemContent:{
  77. flex:1,marginLeft:13,marginTop:6,itemHeader:{
  78. fontSize:18,fontFamily:'Helvetica Neue',fontWeight:'300',color:'#6435c9',itemMeta:{
  79. fontSize:16,color:'rgba(0,0.6)',redText:{
  80. color:'#db2828',listView:{
  81. paddingTop: 20,backgroundColor: '#F5FCFF',loading:{
  82. flex:1,justifyContent:'center',alignItems:'center',overlay: {
  83. backgroundColor: 'rgba(0,0.3)',alignItems: 'center'
  84. },overlayHeader: {
  85. fontSize: 33,fontFamily: 'Helvetica Neue',fontWeight: '200',color: '#eae7ff',padding: 10
  86. },overlaySubHeader: {
  87. fontSize: 16,padding: 10,paddingTop: 0,backImage: {
  88. // alignItems:'center',flex: 1,//justifyContent:'center',resizeMode: 'cover',image: {
  89.  
  90. height: 150,width: 100,justifyContent: 'center',itemOne: {
  91. // alignSelf:'flex-start',itemTwo: {
  92. //alignSelf:'center',itemThree: {
  93. flex: 2,itemText: {
  94. fontSize: 33,color: '#6435c9',padding: 30,Container: {
  95.  
  96. //alignItems:'flex-start',// flex-start 靠在左边显示 center 居中 flex-end 尾部
  97. //
  98. flexDirection: 'column',//row column 方向
  99. backgroundColor: '#eae7ff',//center ; 居中 flex-end 位于底部 space-between/space-around屏幕平均分配
  100. },Text: {
  101. color: '#6435c9',fontSize: 26,textAlign: 'center',fontStyle: 'italic',letterSpacing: 2,lineHeight: 33,fontWeight: '300',textDecorationLine: 'underline',textDecorationStyle: 'dashed',});
  102.  
  103. class ComText extends React.Component {
  104. render() {
  105. return (
  106. <Text style={styles.itemText}>
  107. {this.props.children}
  108. </Text>
  109. );
  110. }
  111. }
  112.  
  113. AppRegistry.registerComponent('Day0718',() => Day0718);

请求豆瓣Top250数据,解析到ListView上展示


---------------欢迎各位大神加群

----------------Android交流群:230274309

-----------------------------期待大神们的到来

------------------------一---起分享,一起进步!需要你们

猜你在找的React相关文章