SevicheCC/timepill-app
1
0
Fork 0
mirror of https://github.com/timepill/timepill-app.git synced 2025-04-30 09:59:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

1. react-native-tab-view 更新版本，适用于用户详情页

Browse source 
2. 日记详情页点不开问题修复
This commit is contained in:
xuwenyang 2019-05-14 20:22:45 +08:00
parent eeeca9f3b5
commit 2a75bd4e33
6 changed files with 139 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -10872,6 +10872,14 @@
"react-native-root-siblings": "^3.0.0"
}
},
"react-native-tab-view": {
"version": "1.3.0",
"resolved": "https://registry.npm.taobao.org/react-native-tab-view/download/react-native-tab-view-1.3.0.tgz",
"integrity": "sha1-gi/PFOmh0I01SDOMIXxxajFjfhw=",
"requires": {
"prop-types": "^15.6.1"
}
},
"react-native-vector-icons": {
"version": "4.5.0",
"resolved": "http://registry.npm.taobao.org/react-native-vector-icons/download/react-native-vector-icons-4.5.0.tgz",

1
package.json
View file

@ -18,6 +18,7 @@
"react-native-iphone-x-helper": "^1.0.2",
"react-native-navigation": "^2.18.5",
"react-native-root-toast": "^3.0.0",
"react-native-tab-view": "^1.3.0",
"react-native-vector-icons": "^4.5.0"
},
"devDependencies": {

17
src/component/diary/diaryList.js
View file

@ -6,6 +6,7 @@ import {
FlatList,
Text, View
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import {Divider} from "react-native-elements";
import Color from '../../style/color';
@ -47,8 +48,6 @@ export default class DiaryList extends Component {
this.setState({hasMore: false, refreshing: true, refreshFailed: false});
this.dataSource.refresh(loadMore)
.then(result => {
console.log('diaryList refresh:', result);
if(!result) {
throw {
message: 'refresh no result'
@ -72,9 +71,11 @@ export default class DiaryList extends Component {
}).catch(e => {
if (e.code === 401) {
/*
this.props.navigator.showModal({
screen: "App"
});
*/
}
this.setState({
@ -99,16 +100,6 @@ export default class DiaryList extends Component {
this.refresh(true);
}
_onDiaryPress(diary) {
this.props.navigator.push({
screen: 'DiaryDetail',
title: '日记详情',
passProps: { diary: diary }
});
}
render() {
return (
<View style={localStyle.container}>
@ -124,7 +115,7 @@ export default class DiaryList extends Component {
renderItem={({item}) => {
return (
<Touchable onPress={() => this._onDiaryPress(item)}>
<Touchable onPress={() => this.props.onDiaryPress(item)}>
<DiaryBrief diary={item}></DiaryBrief>
</Touchable>
)

15
src/page/FollowPage.js
View file

@ -1,5 +1,6 @@
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Navigation} from 'react-native-navigation';
import Api from '../util/api'
@ -14,6 +15,19 @@ export default class FollowPage extends Component {
this.dataSource = new FollowListData();
}
_onDiaryPress(diary) {
console.log('componentId:', this.props.componentId, diary);
Navigation.push(this.props.componentId, {
component: {
name: 'DiaryDetail',
passProps: {
diary: diary
}
}
});
}
renderHeader() {
return (
<View style={localStyle.header}>
@ -28,6 +42,7 @@ export default class FollowPage extends Component {
<DiaryList ref={(r) => this.list = r}
dataSource={this.dataSource}
header={this.renderHeader.bind(this)}
onDiaryPress={this._onDiaryPress.bind(this)}
navigator={this.props.navigator}

15
src/page/HomePage.js
View file

@ -1,5 +1,6 @@
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {Navigation} from 'react-native-navigation';
import Api from '../util/api';
@ -14,6 +15,19 @@ export default class HomePage extends Component {
this.dataSource = new HomeListData();
}
_onDiaryPress(diary) {
console.log('componentId:', this.props.componentId, diary);
Navigation.push(this.props.componentId, {
component: {
name: 'DiaryDetail',
passProps: {
diary: diary
}
}
});
}
renderHeader() {
return (
<View style={localStyle.header}>
@ -28,6 +42,7 @@ export default class HomePage extends Component {
<DiaryList ref={(r) => this.list = r}
dataSource={this.dataSource}
header={this.renderHeader.bind(this)}
onDiaryPress={this._onDiaryPress.bind(this)}
navigator={this.props.navigator}

117
src/page/UserPage.js
View file

@ -1,33 +1,108 @@
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {StyleSheet, Text, View, Animated} from 'react-native';
import {
PagerScroll,
TabView,
TabBar,
SceneMap
} from 'react-native-tab-view';
import Api from '../util/api';
import Color from '../style/color';
export default class UserPage extends Component {
constructor(props) {
super(props);
this.state = {
index: 0,
routes: [
{ key: 'userInfo', title: '简介' },
{ key: 'diary', title: '日记' },
{ key: 'notebook', title: '日记本' }
]
};
}
_renderLabel = props => ({route}) => {
let routes = props.navigationState.routes;
let index = props.navigationState.index;
let color = route.key == routes[index].key ? Color.primary : '#222';
return (
<Animated.Text
style={[localStyle.label, {color}]}>
{route.title}
</Animated.Text>
);
};
_renderTabBar = props => {
return (
<TabBar
{...props}
style={localStyle.tabBar}
indicatorStyle={localStyle.indicator}
renderLabel={this._renderLabel(props)}
>
</TabBar>
);
};
_renderScene = SceneMap({
userInfo: () => <View style={localStyle.container}><Text style={localStyle.welcome}>user info !</Text></View>,
diary: () => <View style={localStyle.container}><Text style={localStyle.welcome}>diary !</Text></View>,
notebook: () => <View style={localStyle.container}><Text style={localStyle.welcome}>notebook !</Text></View>
});
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>User Page !</Text>
</View>
<TabView style={localStyle.container}
initialLayout={{
height: 0,
width: Api.DEVICE_WINDOW.width
}}
renderPager={(props) => <PagerScroll {...props}/>} /* android */
renderTabBar={this._renderTabBar}
renderScene={this._renderScene}
navigationState={this.state}
onIndexChange={index => {
this.setState({index});
}}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
const localStyle = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
marginTop: 40
},
container: {
flex: 1
},
tabBar: {
backgroundColor: '#fff',
paddingTop: 10,
paddingBottom: 5
},
indicator: {
backgroundColor: Color.primary
},
label: {
fontSize: 13,
fontWeight: 'bold'
}
});