/** * Sample React Native App * https://github.com/facebook/react-native*/' Use strict ';varReact = require (' react-native '));var{appregistry, StyleSheet, Text, Image, View, TextInput, ListView,}=React;varGit_url = ' https://api.github.com/search/repositories?q= ';varAwesonproject =React.createclass ({/*-- Lifecycle- -*/getinitialstate:function() { return { //(Row1, row2) = Row1!== row2: If two times the data is different, tell the data source that the data has changedDataSource:NewListview.datasource ({rowhaschanged: (Row1, Row2)= Row1!==Row2,}),}; }, Render:function() { varlistviewcontent; 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}&G T <textinput autocapitalize=' None 'Autocorrect={false} placeholder=' Search Forr git project ... ' Onendediting={this.onsearchchange} style={styles.searchview}> </TextInput> { Listviewcontent} </View>); },/*--Private method--*///Click Search response Data Request Onsearchchange:function (event) {var serarchtext = Event.nativeEvent.text. toLowerCase (); var queryurl = Git_url + encodeURIComponent (serarchtext); Fetch (Queryurl) and then ((response) = Response.json ()). Then ((responsedata) and {if (responsedata.ite ms) {This.setstate ({dataSource:this.state.dataSource.cloneWithRows (Responsedata.items)}) ; }}). Done (); },//each row of data in the Render list 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>) ; },});/* layout style */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--implements a simple crawl of the project data list on GitHub