From 2a75bd4e33b375ef16c51a5d092c63f056fa74d2 Mon Sep 17 00:00:00 2001 From: xuwenyang Date: Tue, 14 May 2019 20:22:45 +0800 Subject: [PATCH] =?UTF-8?q?1.=20react-native-tab-view=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=89=88=E6=9C=AC=EF=BC=8C=E9=80=82=E7=94=A8=E4=BA=8E=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E8=AF=A6=E6=83=85=E9=A1=B5=202.=20=E6=97=A5=E8=AE=B0?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E7=82=B9=E4=B8=8D=E5=BC=80=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 +++ package.json | 1 + src/component/diary/diaryList.js | 17 ++--- src/page/FollowPage.js | 15 ++++ src/page/HomePage.js | 15 ++++ src/page/UserPage.js | 117 +++++++++++++++++++++++++------ 6 files changed, 139 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4df971a..5f47c3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 72a4406..4ba2b5a 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/component/diary/diaryList.js b/src/component/diary/diaryList.js index bc009e1..3e063d6 100644 --- a/src/component/diary/diaryList.js +++ b/src/component/diary/diaryList.js @@ -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 ( @@ -124,7 +115,7 @@ export default class DiaryList extends Component { renderItem={({item}) => { return ( - this._onDiaryPress(item)}> + this.props.onDiaryPress(item)}> ) diff --git a/src/page/FollowPage.js b/src/page/FollowPage.js index d935480..bfd9051 100644 --- a/src/page/FollowPage.js +++ b/src/page/FollowPage.js @@ -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 ( @@ -28,6 +42,7 @@ export default class FollowPage extends Component { this.list = r} dataSource={this.dataSource} header={this.renderHeader.bind(this)} + onDiaryPress={this._onDiaryPress.bind(this)} navigator={this.props.navigator} diff --git a/src/page/HomePage.js b/src/page/HomePage.js index cfa93e1..d053394 100644 --- a/src/page/HomePage.js +++ b/src/page/HomePage.js @@ -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 ( @@ -28,6 +42,7 @@ export default class HomePage extends Component { this.list = r} dataSource={this.dataSource} header={this.renderHeader.bind(this)} + onDiaryPress={this._onDiaryPress.bind(this)} navigator={this.props.navigator} diff --git a/src/page/UserPage.js b/src/page/UserPage.js index f1a78c1..377532c 100644 --- a/src/page/UserPage.js +++ b/src/page/UserPage.js @@ -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 ( + + {route.title} + + ); + }; + + _renderTabBar = props => { + return ( + + + ); + }; + + _renderScene = SceneMap({ + userInfo: () => user info !, + diary: () => diary !, + notebook: () => notebook ! + }); + render() { return ( - - User Page ! - + } /* 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' + } });