Skip to content

Commit fa83e2f

Browse files
crazycodeboycrazycodeboy
committed
RepositoryDetail.js update to ES6
1 parent 70dbd1c commit fa83e2f

File tree

2 files changed

+100
-104
lines changed

2 files changed

+100
-104
lines changed

‎app/PopularPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ var {
1717
} = ReactNative;
1818
var RepositoryCell=require('./RepositoryCell')
1919
var dismissKeyboard=require('dismissKeyboard')
20-
var RepositoryDetail=require('./RepositoryDetail')
20+
import RepositoryDetail from './RepositoryDetail'
2121
var FavoriteDao=require('./dao/FavoriteDao')
2222
var RespositoryDao=require('./dao/RespositoryDao')
2323
var ProjectModel=require('./model/ProjectModel')

‎app/RepositoryDetail.js‎

Lines changed: 99 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,109 @@
11
/**
2-
* RepositoryDetail
3-
* @flow
4-
**/
2+
* RepositoryDetail
3+
* @flow
4+
**/
55
'use strict'
6-
var React=require('react');
7-
var ReactNative=require('react-native');
8-
var{
9-
Image,
10-
ScrollView,
11-
StyleSheet,
12-
WebView,
13-
Platform,
14-
BackAndroid,
15-
Text,
16-
View,
17-
}=ReactNative;
18-
var NavigationBar=require('./NavigationBar');
19-
var FavoriteDao=require('./dao/FavoriteDao');
6+
import React, {Component} from 'react'
7+
import {
8+
Image,
9+
ScrollView,
10+
StyleSheet,
11+
WebView,
12+
Platform,
13+
BackAndroid,
14+
Text,
15+
View,
16+
} from 'react-native'
17+
import NavigationBar from './NavigationBar'
18+
import FavoriteDao from './dao/FavoriteDao'
2019
var favoriteDao = new FavoriteDao();
2120
var WEBVIEW_REF = 'webview';
2221

23-
var RepositoryDetail=React.createClass({
24-
getInitialState(){
25-
return{
26-
isFavorite:this.props.projectModel.isFavorite,
27-
favoriteIcon:this.props.projectModel.isFavorite? require('../res/images/ic_star_border_white_24dp.png'):require('../res/images/ic_star_border_gray_white_24dp.png'),
28-
url:this.props.projectModel.item.html_url,
29-
canGoBack:false,
30-
title:this.props.projectModel.item.full_name
22+
export default class RepositoryDetail extends Component {
23+
constructor(propos) {
24+
super(propos);
25+
this.state = {
26+
isFavorite: this.props.projectModel.isFavorite,
27+
favoriteIcon: this.props.projectModel.isFavorite ? require('../res/images/ic_star_border_white_24dp.png') : require('../res/images/ic_star_border_gray_white_24dp.png'),
28+
url: this.props.projectModel.item.html_url,
29+
canGoBack: false,
30+
title: this.props.projectModel.item.full_name
31+
}
3132
}
32-
},
33-
componentDidMount(){
34-
BackAndroid.addEventListener('hardwareBackPress',this.onHardwareBackPress);
35-
},
36-
componentWillUnmount:function(){
37-
if (this.props.parentComponent)this.props.parentComponent.updateFavorite();
38-
BackAndroid.removeEventListener('hardwareBackPress',this.onHardwareBackPress);
39-
},
40-
onHardwareBackPress(){
41-
this.onLeftButtonClick();
42-
return true;
43-
},
44-
setFavoriteState(isFavorite:boolean){
45-
this.setState({
46-
isFavorite:isFavorite,
47-
favoriteIcon:isFavorite? require('../res/images/ic_star_border_white_24dp.png'):require('../res/images/ic_star_border_gray_white_24dp.png')
48-
})
49-
},
50-
onRightButtonClick(){//favoriteIcon单击回调函数
51-
var projectModel=this.props.projectModel;
52-
this.setFavoriteState(projectModel.isFavorite=!projectModel.isFavorite);
53-
if(projectModel.isFavorite){
54-
favoriteDao.saveFavoriteItem(projectModel.item.id.toString(),JSON.stringify(projectModel.item));
55-
}else {
56-
favoriteDao.removeFavoriteItem(projectModel.item.id.toString());
33+
34+
componentDidMount() {
35+
BackAndroid.addEventListener('hardwareBackPress', this.onHardwareBackPress);
36+
}
37+
38+
componentWillUnmount() {
39+
if (this.props.parentComponent)this.props.parentComponent.updateFavorite();
40+
BackAndroid.removeEventListener('hardwareBackPress', this.onHardwareBackPress);
41+
}
42+
43+
onHardwareBackPress() {
44+
this.onLeftButtonClick();
45+
return true;
46+
}
47+
48+
setFavoriteState(isFavorite) {
49+
this.setState({
50+
isFavorite: isFavorite,
51+
favoriteIcon: isFavorite ? require('../res/images/ic_star_border_white_24dp.png') : require('../res/images/ic_star_border_gray_white_24dp.png')
52+
})
5753
}
58-
},
59-
onLeftButtonClick(){
60-
if(this.state.canGoBack){
61-
this.refs[WEBVIEW_REF].goBack();
62-
}else {
63-
this.props.navigator.pop();
54+
55+
onRightButtonClick() {//favoriteIcon单击回调函数
56+
var projectModel = this.props.projectModel;
57+
this.setFavoriteState(projectModel.isFavorite = !projectModel.isFavorite);
58+
if (projectModel.isFavorite) {
59+
favoriteDao.saveFavoriteItem(projectModel.item.id.toString(), JSON.stringify(projectModel.item));
60+
} else {
61+
favoriteDao.removeFavoriteItem(projectModel.item.id.toString());
62+
}
63+
}
64+
65+
onLeftButtonClick() {
66+
if (this.state.canGoBack) {
67+
this.refs[WEBVIEW_REF].goBack();
68+
} else {
69+
this.props.navigator.pop();
70+
}
6471
}
65-
},
66-
onNavigationStateChange(navState:Object) {
67-
this.setState({
68-
canGoBack: navState.canGoBack,
69-
url: navState.url,
70-
// title: navState.title,
71-
// loading: navState.loading,
72-
// scalesPageToFit: true
73-
});
74-
},
75-
render:function() {
76-
var item=this.props.projectModel.item;
77-
return(
78-
// <ScrollView style={styles.container}>
79-
// <View >
80-
// <Text>{item.full_name}</Text>
81-
// <Text>{item.description}</Text>
82-
// <Text>{item.stargazers_count}</Text>
83-
// <Text>{item.owner.login}</Text>
84-
// </View>
85-
// </ScrollView>
86-
<View style={styles.container}>
87-
<NavigationBar
88-
navigator={this.props.navigator}
89-
leftButtonTitle='Back'
90-
popEnabled={false}
91-
onLeftButtonClick={this.onLeftButtonClick}
92-
title={this.state.title}
93-
rightButtonIcon={this.state.favoriteIcon}
94-
onRightButtonClick={this.onRightButtonClick}
95-
/>
96-
<WebView
97-
ref={WEBVIEW_REF}
98-
startInLoadingState={true}
99-
onNavigationStateChange={this.onNavigationStateChange}
100-
source={{uri:this.state.url}}/>
101-
</View>
10272

103-
);
104-
},
105-
});
106-
const styles=StyleSheet.create({
107-
container: {
108-
flex:1,
109-
backgroundColor:'#ffffff',
110-
marginBottom:Platform.OS==="ios"?50:0,
111-
},
73+
onNavigationStateChange(navState) {
74+
this.setState({
75+
canGoBack: navState.canGoBack,
76+
url: navState.url,
77+
});
78+
}
79+
80+
render() {
81+
return (
82+
<View style={styles.container}>
83+
<NavigationBar
84+
navigator={this.props.navigator}
85+
leftButtonTitle='Back'
86+
popEnabled={false}
87+
onLeftButtonClick={()=>this.onLeftButtonClick()}
88+
title={this.state.title}
89+
rightButtonIcon={this.state.favoriteIcon}
90+
onRightButtonClick={()=>this.onRightButtonClick()}
91+
/>
92+
<WebView
93+
ref={WEBVIEW_REF}
94+
startInLoadingState={true}
95+
onNavigationStateChange={(e)=>this.onNavigationStateChange(e)}
96+
source={{uri: this.state.url}}/>
97+
</View>
98+
99+
);
100+
}
101+
}
102+
;
103+
const styles = StyleSheet.create({
104+
container: {
105+
flex: 1,
106+
backgroundColor: '#ffffff',
107+
marginBottom: Platform.OS === "ios" ? 50 : 0,
108+
},
112109
})
113-
module.exports=RepositoryDetail

0 commit comments

Comments
 (0)