Merge branch 'develop' of http://git.yoho.cn/mobile/YH_RNComponent into develop
Conflicts: js/community/Community.js
Showing
16 changed files
with
304 additions
and
2 deletions
@@ -25,6 +25,8 @@ import HomeContainer from './containers/HomeContainer'; | @@ -25,6 +25,8 @@ import HomeContainer from './containers/HomeContainer'; | ||
25 | 25 | ||
26 | import UserContainer from './containers/UserContainer'; | 26 | import UserContainer from './containers/UserContainer'; |
27 | 27 | ||
28 | +import SubjectPostContainer from './containers/SubjectPostContainer' | ||
29 | + | ||
28 | import NavBar from './components/NavBar'; | 30 | import NavBar from './components/NavBar'; |
29 | 31 | ||
30 | let VERSION = '0.0.1'; | 32 | let VERSION = '0.0.1'; |
@@ -118,6 +120,7 @@ export default function community(platform) { | @@ -118,6 +120,7 @@ export default function community(platform) { | ||
118 | }} | 120 | }} |
119 | /> | 121 | /> |
120 | 122 | ||
123 | + | ||
121 | <Scene | 124 | <Scene |
122 | key="User" | 125 | key="User" |
123 | title="用户中心" | 126 | title="用户中心" |
@@ -131,6 +134,18 @@ export default function community(platform) { | @@ -131,6 +134,18 @@ export default function community(platform) { | ||
131 | }} | 134 | }} |
132 | /> | 135 | /> |
133 | 136 | ||
137 | + | ||
138 | + <Scene | ||
139 | + key="SubjectPost" | ||
140 | + title="主题帖" | ||
141 | + hideNavBar={false} | ||
142 | + component={SubjectPostContainer} | ||
143 | + initial={false} | ||
144 | + navBar={NavBar} | ||
145 | + titleStyle={styles.navTitle} | ||
146 | + type="push" | ||
147 | + /> | ||
148 | + | ||
134 | </Scene> | 149 | </Scene> |
135 | </NewRouter> | 150 | </NewRouter> |
136 | </Provider> | 151 | </Provider> |
@@ -45,7 +45,7 @@ export default class Home extends React.Component { | @@ -45,7 +45,7 @@ export default class Home extends React.Component { | ||
45 | return ( | 45 | return ( |
46 | <View style={{flexDirection: 'row', justifyContent: 'center'}}> | 46 | <View style={{flexDirection: 'row', justifyContent: 'center'}}> |
47 | 47 | ||
48 | - <Text>这是社区首页</Text> | 48 | + <Text onPress={this.props.testPress}>这是社区首页</Text> |
49 | 49 | ||
50 | </View> | 50 | </View> |
51 | ); | 51 | ); |
js/community/components/Posting.js
0 → 100644
1 | +import React, {Component} from 'react'; | ||
2 | +import { | ||
3 | + View, | ||
4 | + Text, | ||
5 | + Image, | ||
6 | + StyleSheet, | ||
7 | +} from 'react-native' | ||
8 | + | ||
9 | +export default class SPHeaderCell extends Component { | ||
10 | + constructor(props) { | ||
11 | + super(props); | ||
12 | + } | ||
13 | + | ||
14 | + renderName() { | ||
15 | + if (this.props.data.owner) { | ||
16 | + return( | ||
17 | + <Text style={styles.nameLabel}> | ||
18 | + {this.props.data.name + ' | '} | ||
19 | + <Text style={styles.ownerColor}>楼主</Text> | ||
20 | + </Text> | ||
21 | + ); | ||
22 | + } else { | ||
23 | + return( | ||
24 | + <Text style={styles.nameLabel}>this.props.data.name</Text> | ||
25 | + ); | ||
26 | + } | ||
27 | + } | ||
28 | + | ||
29 | + renderDelete() { | ||
30 | + if (this.props.data.owner) { | ||
31 | + return( | ||
32 | + <Text style={[styles.nameLabel, styles.ownerColor, styles.deletePosition]}> | ||
33 | + 删除本帖 | ||
34 | + </Text> | ||
35 | + ); | ||
36 | + } | ||
37 | + } | ||
38 | + render() { | ||
39 | + return( | ||
40 | + <View style={styles.container}> | ||
41 | + <Image | ||
42 | + style={styles.avatar} | ||
43 | + source={{uri:this.props.data.avatar}} | ||
44 | + /> | ||
45 | + <Text style={styles.timeLabel}>{this.props.data.time}</Text> | ||
46 | + {this.renderName()} | ||
47 | + {this.renderDelete()} | ||
48 | + <Text style={styles.fromLabel}>{this.props.data.templete}</Text> | ||
49 | + </View> | ||
50 | + ); | ||
51 | + } | ||
52 | +} | ||
53 | + | ||
54 | +const styles = StyleSheet.create({ | ||
55 | + | ||
56 | + container: { | ||
57 | + flexDirection: 'row', | ||
58 | + }, | ||
59 | + | ||
60 | + avatar: { | ||
61 | + top: 15, | ||
62 | + left: 15, | ||
63 | + width: 30, | ||
64 | + height: 30, | ||
65 | + borderRadius: 15, | ||
66 | + backgroundColor: 'grey', | ||
67 | + }, | ||
68 | + | ||
69 | + //来自哪个模块 | ||
70 | + fromLabel: { | ||
71 | + top:15, | ||
72 | + right:15, | ||
73 | + height: 20, | ||
74 | + backgroundColor: '#aaaaaa', | ||
75 | + fontSize: 15, | ||
76 | + textAlign: 'center' | ||
77 | + }, | ||
78 | + | ||
79 | + nameLabel: { | ||
80 | + top: 15, | ||
81 | + marginLeft: 15, | ||
82 | + height: 20, | ||
83 | + fontSize: 12, | ||
84 | + color: 'black', | ||
85 | + backgroundColor: 'red', | ||
86 | + textAlign: 'left', | ||
87 | + bottom: 10, | ||
88 | + }, | ||
89 | + | ||
90 | + ownerColor: { | ||
91 | + color: '#4a90e2', | ||
92 | + }, | ||
93 | + | ||
94 | + deletePosition: { | ||
95 | + left: 0, | ||
96 | + top: 60, | ||
97 | + }, | ||
98 | + | ||
99 | + timeLabel: { | ||
100 | + top: 32, | ||
101 | + height: 12, | ||
102 | + left: 15, | ||
103 | + fontSize: 10, | ||
104 | + color: '#999999', | ||
105 | + | ||
106 | + }, | ||
107 | +}); |
1 | +'use strict' | ||
2 | + | ||
3 | +import React, {Component} from 'react'; | ||
4 | +import { | ||
5 | + View, | ||
6 | + Text, | ||
7 | + ListView, | ||
8 | + StyleSheet, | ||
9 | +} from 'react-native' | ||
10 | + | ||
11 | +import SPHeaderCell from './SPHeaderCell' | ||
12 | + | ||
13 | +export default class SubjectPost extends Component { | ||
14 | + constructor(props) { | ||
15 | + super(props); | ||
16 | + this.dataSource = new ListView.DataSource({ | ||
17 | + rowHasChanged:(r1,r2)=> r1 != r2, | ||
18 | + sectionHeaderHasChanged: (s1, s2) => s1 != s2, | ||
19 | + }); | ||
20 | + this.renderRow = this.renderRow.bind(this); | ||
21 | + } | ||
22 | + | ||
23 | + renderRow(rowData, sectionId) { | ||
24 | + console.log(sectionId); | ||
25 | + switch (sectionId) { | ||
26 | + case 'header': | ||
27 | + | ||
28 | + return( | ||
29 | + <SPHeaderCell data={rowData}/> | ||
30 | + ); | ||
31 | + break; | ||
32 | + default: | ||
33 | + | ||
34 | + break; | ||
35 | + } | ||
36 | + } | ||
37 | + | ||
38 | + render() { | ||
39 | + | ||
40 | + const testDataBlob = { | ||
41 | + | ||
42 | + "header": [ | ||
43 | + { | ||
44 | + "name":"川本小一郎", | ||
45 | + "avatar":"http://img0.imgtn.bdimg.com/it/u=441053097,4234222567&fm=21&gp=0.jpg", | ||
46 | + "owner":true, | ||
47 | + "templete":"永恒的潮流", | ||
48 | + "time":"2小时前", | ||
49 | + } | ||
50 | + ], | ||
51 | + } | ||
52 | + | ||
53 | + return( | ||
54 | + <ListView | ||
55 | + style={styles.container} | ||
56 | + dataSource={this.dataSource.cloneWithRowsAndSections(testDataBlob)} | ||
57 | + renderRow={this.renderRow} | ||
58 | + enableEmptySections={true} | ||
59 | + /> | ||
60 | + ); | ||
61 | + } | ||
62 | +} | ||
63 | + | ||
64 | +const styles = StyleSheet.create({ | ||
65 | + container: { | ||
66 | + top: 0, | ||
67 | + flex: 1, | ||
68 | + }, | ||
69 | +}); |
@@ -13,6 +13,9 @@ import Home from '../components/Home'; | @@ -13,6 +13,9 @@ import Home from '../components/Home'; | ||
13 | import * as homeActions from '../reducers/home/homeActions'; | 13 | import * as homeActions from '../reducers/home/homeActions'; |
14 | 14 | ||
15 | 15 | ||
16 | +import {Actions} from 'react-native-router-flux'; | ||
17 | + | ||
18 | + | ||
16 | const { | 19 | const { |
17 | StatusBar, | 20 | StatusBar, |
18 | ScrollView, | 21 | ScrollView, |
@@ -61,12 +64,16 @@ class HomeContainer extends React.Component { | @@ -61,12 +64,16 @@ class HomeContainer extends React.Component { | ||
61 | constructor(props) { | 64 | constructor(props) { |
62 | super(props); | 65 | super(props); |
63 | 66 | ||
67 | + this.testPress = this.testPress.bind(this); | ||
64 | } | 68 | } |
65 | 69 | ||
66 | componentDidMount() { | 70 | componentDidMount() { |
67 | 71 | ||
68 | } | 72 | } |
69 | 73 | ||
74 | + testPress() { | ||
75 | + Actions.SubjectPost(); | ||
76 | + } | ||
70 | render() { | 77 | render() { |
71 | 78 | ||
72 | return ( | 79 | return ( |
@@ -75,7 +82,7 @@ class HomeContainer extends React.Component { | @@ -75,7 +82,7 @@ class HomeContainer extends React.Component { | ||
75 | hidden={false} | 82 | hidden={false} |
76 | barStyle={'light-content'} | 83 | barStyle={'light-content'} |
77 | /> | 84 | /> |
78 | - <Home/> | 85 | + <Home testPress={this.testPress}/> |
79 | </View> | 86 | </View> |
80 | ); | 87 | ); |
81 | } | 88 | } |
js/community/containers/PostingContainer.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import React, {Component} from 'react'; | ||
4 | +import { | ||
5 | + View, | ||
6 | + StyleSheet, | ||
7 | + Dimensions, | ||
8 | + Platform, | ||
9 | +} from 'react-native'; | ||
10 | + | ||
11 | +import {bindActionCreators} from 'redux'; | ||
12 | +import {connect} from 'react-redux'; | ||
13 | +import {Map} from 'immutable'; | ||
14 | + | ||
15 | +import SubjectPost from '../components/SubjectPost/SubjectPost'; | ||
16 | + | ||
17 | +import * as subjectPostActions from '../reducers/subject/subjectPostActions'; | ||
18 | + | ||
19 | + | ||
20 | +/** | ||
21 | + * ## Actions | ||
22 | + * 3 of our actions will be available as ```actions``` | ||
23 | + */ | ||
24 | +const actions = [ | ||
25 | + subjectPostActions, | ||
26 | +]; | ||
27 | + | ||
28 | +/** | ||
29 | + * Save that state | ||
30 | + */ | ||
31 | +function mapStateToProps(state) { | ||
32 | + return { | ||
33 | + ...state | ||
34 | + }; | ||
35 | +} | ||
36 | + | ||
37 | +/** | ||
38 | + * Bind all the functions from the ```actions``` and bind them with | ||
39 | + * ```dispatch``` | ||
40 | + */ | ||
41 | +function mapDispatchToProps(dispatch) { | ||
42 | + | ||
43 | + const creators = Map() | ||
44 | + .merge(...actions) | ||
45 | + .filter(value => typeof value === 'function') | ||
46 | + .toObject(); | ||
47 | + | ||
48 | + return { | ||
49 | + actions: bindActionCreators(creators, dispatch), | ||
50 | + dispatch | ||
51 | + }; | ||
52 | +} | ||
53 | + | ||
54 | +class SubjectPostContainer extends Component { | ||
55 | + constructor(props) { | ||
56 | + super(props); | ||
57 | + | ||
58 | + } | ||
59 | + | ||
60 | + render() { | ||
61 | + | ||
62 | + return ( | ||
63 | + <View style={styles.container}> | ||
64 | + <SubjectPost/> | ||
65 | + </View> | ||
66 | + ); | ||
67 | + } | ||
68 | +} | ||
69 | + | ||
70 | +let {width, height} = Dimensions.get('window'); | ||
71 | +let navbarHeight = (Platform.OS === 'android') ? 50 : 64; | ||
72 | + | ||
73 | +let styles = StyleSheet.create({ | ||
74 | + container: { | ||
75 | + top: navbarHeight, | ||
76 | + height: height - navbarHeight - 49, | ||
77 | + }, | ||
78 | + | ||
79 | +}); | ||
80 | + | ||
81 | +export default connect(mapStateToProps, mapDispatchToProps)(SubjectPostContainer); |
-
Please register or login to post a comment