Create a gist now

Instantly share code, notes, and snippets.

anonymous /Dashboard.js
Created Feb 28, 2017

What would you like to do?
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
StyleSheet,
Image,
ListView,
TouchableHighlight,
Alert
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class Dashboard extends React.Component {
constructor(props) {
super(props);
var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.course_title !== r2.course_title});
this.state = {
dataSource: dataSource.cloneWithRows([
{'course_id': '0' ,'course_title': 'title0', 'learn_language': 'Emglish0', 'expiration_time' :'time0','oppo_user_obj': {'avatar_file_name':'imageurl0', 'nickname': 'waterever0'}},
{'course_id': '1', 'course_title': 'title1', 'learn_language': 'Emglish1', 'expiration_time' :'time1','oppo_user_obj': {'avatar_file_name':'imageurl1', 'nickname': 'waterever1'}}
])
};
}
rowPressed(avatar_file_name) {
Alert.alert('Alert Title', avatar_file_name)
}
renderRow(rowData, sectionID, rowID) {
var course_title = rowData.course_title.split(' ')[0];
return (
<TouchableHighlight onPress={() => this.rowPressed(rowData.oppo_user_obj.avatar_file_name)}
underlayColor='#dddddd'>
<View>
<View style={styles.rowContainer}>
<Image style={styles.thumb} source={{ uri: 'https://a499af057572c393815e-e011ef914a29f21f9a22bf73f79926ab.ssl.cf1.rackcdn.com/'+ rowData.oppo_user_obj.avatar_file_name+ '_Avatar_3.jpg' }} />
<View style={styles.textContainer}>
<Text style={styles.course_title}>{course_title}</Text>
<Text style={styles.title}
numberOfLines={1}>{rowData.expiration_time}</Text>
</View>
</View>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
}
_handlePress(event) {
this.fetchBasicDataAsync()
}
fetchBasicDataAsync() {
const { params } = this.props.navigation.state;
fetch('https://www.italki.com/api/session/package?page=1&page_size=30&type=all', {
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Token': params.token,
},
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1.course_title !== r2.course_id});
this.setState({
dataSource: dataSource.cloneWithRows(responseJson.data)
});
})
.catch((error) => {
console.error(error);
});
}
static navigationOptions = {
title: ({ state }) => `Dashboard`,
};
render() {
const { params } = this.props.navigation.state;
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'steelblue'}} >
<View style={{flex: 10}} >
<ListView style={{backgroundColor: 'skyblue'}}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}/>
</View>
<View style={{flex: 1}} >
<Button onPress={this._handlePress.bind(this)} title="fetch data from server" color="#841584" accessibilityLabel="Tap on Me"/>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
thumb: {
width: 80,
height: 80,
marginRight: 10
},
textContainer: {
flex: 1
},
separator: {
height: 1,
backgroundColor: '#dddddd'
},
course_title: {
fontSize: 25,
fontWeight: 'bold',
color: '#48BBEC'
},
title: {
fontSize: 20,
color: '#656565'
},
rowContainer: {
flexDirection: 'row',
padding: 10
}
});
module.exports=Dashboard;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment