React Native ——實現一個簡單的抓取github上的項目資料列表

標籤：

/** * Sample React Native App * https://github.com/facebook/react-native */‘use strict‘;var React = require(‘react-native‘);var {  AppRegistry,  StyleSheet,  Text,  Image,  View,  TextInput,  ListView,} = React;var GIT_URL = ‘https://api.github.com/search/repositories?q=‘;var AwesonProject = React.createClass({  /*--  lifecycle --*/  getInitialState: function() {    return {      // (row1, row2) => row1 !== row2：如果兩次的資料不同的話，告訴資料來源該資料發生了改變      dataSource: new ListView.DataSource({        rowHasChanged: (row1, row2) => row1 !== row2,      }),    };  },  render: function() {    var listViewContent;    if (this.state.dataSource.getRowCount() === 0) {      listViewContent =                        <Text>                          there‘s nothing to search , please have another key to tap.                        </Text>;    } else {      listViewContent =                        <ListView                          ref=‘listview‘                          dataSource={this.state.dataSource}                          renderRow={this.renderRow}                          automaticallyAdjustConntentInsets={false}                          keyboardShouldPersistTaps={true}                          showsVerticalScrollIndicator={true} />    }    return (      <View style={styles.container}>        <TextInput            autoCapitalize=‘none‘            autoCorrect={false}            placeholder=‘search forr git project...‘            onEndEditing={this.onSearchChange}            style={styles.searchView}>        </TextInput>        {listViewContent}      </View>    );  },  /*-- private method --*/  //點擊搜尋響應資料請求  onSearchChange: function(event) {    var serarchText = event.nativeEvent.text.toLowerCase();    var queryURL = GIT_URL + encodeURIComponent(serarchText);    fetch(queryURL)      .then((response) => response.json())      .then((responseData) => {        if (responseData.items) {          this.setState({            dataSource : this.state.dataSource.cloneWithRows(responseData.items)          });        }      })      .done();  },  //渲染列表中的每一行資料  renderRow: function(item) {    return (      <View>        <View  style={styles.row}>          <Image            source={{uri:item.owner.avatar_url}}            style={styles.Img}>          </Image>          <View>            <Text style={styles.name}>              {item.full_name}            </Text>            <Text style={styles.name}>              Star:{item.stargazers_count}            </Text>          </View>        </View>        <View style={styles.cellBorder}></View>      </View>    );  },});/*配置樣式*/var styles = StyleSheet.create({  container: {    flex: 1,    // justifyContent: ‘center‘,    // alignItems: ‘center‘,    backgroundColor: ‘#F5FCFF‘,  },  searchView:{    marginTop:30,    padding:5,    margin:5,    fontSize:15,    height:30,    backgroundColor:‘#EAEAEA‘  },  row:{    flexDirection:‘row‘,    padding:8,  },  name:{    marginBottom:8,    marginLeft:8,  },  Img:{    width:50,    height:50,  },  cellBorder:{    height:1,    marginLeft:2,    backgroundColor:‘#EAEAEA‘,  }});AppRegistry.registerComponent(‘AwesonProject‘, () => AwesonProject);

 

React Native ——實現一個簡單的抓取github上的項目資料列表