/**
* 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);