From 5f29da8612b2c96889a9381570521b2ce256caa6 Mon Sep 17 00:00:00 2001 From: xuwenyang Date: Fri, 10 May 2019 18:05:37 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E5=8D=95=E6=9D=A1=E6=97=A5=E8=AE=B0?= =?UTF-8?q?=E6=91=98=E8=A6=81=E6=A8=A1=E5=BC=8F=E5=A2=9E=E5=8A=A0=E8=AF=84?= =?UTF-8?q?=E8=AE=BA=E6=95=B0=EF=BC=8C=E6=93=8D=E4=BD=9C=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 5 +++ package.json | 1 + src/component/comment/commentIcon.js | 36 +++++++++++++++++++ src/component/diary/diaryActionIcon.js | 48 ++++++++++++++++++++++++++ src/component/diary/diaryBrief.js | 38 +++++++++++++++++--- src/component/photo.js | 44 +++++++++++++++++++++++ 6 files changed, 168 insertions(+), 4 deletions(-) create mode 100644 src/component/comment/commentIcon.js create mode 100644 src/component/diary/diaryActionIcon.js create mode 100644 src/component/photo.js diff --git a/package-lock.json b/package-lock.json index 4656edc..6d80611 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10803,6 +10803,11 @@ "yargs": "^9.0.0" } }, + "react-native-actionsheet-api": { + "version": "1.0.4", + "resolved": "http://registry.npm.taobao.org/react-native-actionsheet-api/download/react-native-actionsheet-api-1.0.4.tgz", + "integrity": "sha1-AGJeOeRdy8KnERKB/xUDl+5ZUbI=" + }, "react-native-device-info": { "version": "1.6.1", "resolved": "https://registry.npm.taobao.org/react-native-device-info/download/react-native-device-info-1.6.1.tgz", diff --git a/package.json b/package.json index d1763ce..0926f2a 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "moment": "^2.24.0", "react": "16.8.3", "react-native": "0.59.5", + "react-native-actionsheet-api": "^1.0.4", "react-native-device-info": "^1.6.1", "react-native-elements": "^0.19.0", "react-native-iphone-x-helper": "^1.0.2", diff --git a/src/component/comment/commentIcon.js b/src/component/comment/commentIcon.js new file mode 100644 index 0000000..26895cd --- /dev/null +++ b/src/component/comment/commentIcon.js @@ -0,0 +1,36 @@ +import React, {Component} from 'react'; +import {StyleSheet, Text, View} from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; + +import Color from '../../style/color' + + +export default class CommentIcon extends Component { + + render() { + return ( + + + + {this.props.count} + + ); + } +} + +const localStyle = StyleSheet.create({ + commentIconBox: { + flexDirection: "row" + }, + buttonIcon: { + marginRight: 8, + marginLeft: 2 + }, + commentIconIext: { + fontSize: 15, + color: Color.inactiveText + } +}); diff --git a/src/component/diary/diaryActionIcon.js b/src/component/diary/diaryActionIcon.js new file mode 100644 index 0000000..27a223b --- /dev/null +++ b/src/component/diary/diaryActionIcon.js @@ -0,0 +1,48 @@ +import React, {Component} from 'react'; +import {StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; +import ActionSheet from 'react-native-actionsheet-api'; + +import Color from '../../style/color' + + +export default class DiaryActionIcon extends Component { + + _defaultOnPress() { + ActionSheet.showActionSheetWithOptions({ + options:['修改','删除', '取消'], + cancelButtonIndex: 2, + destructiveButtonIndex: 1 + + }, (index) => { + if(index === 0) { + + + } else if (index === 1) { + Alert.alert('提示', '确认删除日记?',[ + {text: '删除', style: 'destructive', onPress: () => {}}, + {text: '取消', onPress: () => {}}, + ]); + } + }); + } + + render() { + return ( + + + + + ); + } +} + +const localStyle = StyleSheet.create({ + moreIcon: { + paddingVertical: 5, + paddingHorizontal: 5 + } +}); diff --git a/src/component/diary/diaryBrief.js b/src/component/diary/diaryBrief.js index 8805f9e..ff4ccaa 100644 --- a/src/component/diary/diaryBrief.js +++ b/src/component/diary/diaryBrief.js @@ -1,9 +1,13 @@ import React, {Component} from 'react'; -import {Platform, StyleSheet, Text, View} from 'react-native'; +import {StyleSheet, Text, View} from 'react-native'; import moment from 'moment' import Color from '../../style/color' import UserIcon from './userIcon' +import Photo from '../photo' + +import CommentIcon from '../comment/commentIcon' +import DiaryActionIcon from './diaryActionIcon' export default class DiaryBrief extends Component { @@ -11,6 +15,7 @@ export default class DiaryBrief extends Component { render() { let diary = this.props.diary; let user = diary.user; + let editable = this.props.editable; return ( @@ -31,7 +36,24 @@ export default class DiaryBrief extends Component { {diary.content.trim()} + + + + + { + diary.comment_count > 0 + ? + : null + } + + { + editable + ? + : null + } + + ); } @@ -48,7 +70,8 @@ const localStyle = StyleSheet.create({ flexDirection: "column", flexGrow: 1, flexShrink: 1, - paddingTop: 2 + paddingTop: 2, + paddingBottom: 5 }, title: { flexDirection: "row", @@ -69,7 +92,14 @@ const localStyle = StyleSheet.create({ lineHeight: 24, color: Color.text, fontSize: 15, - textAlignVertical: 'bottom', - paddingBottom: 15 + textAlignVertical: 'bottom' + }, + actionBar: { + flexDirection: 'row', + alignItems: "center", + width: '100%', + height: 30, + marginTop: 5, + justifyContent: 'space-between' } }); diff --git a/src/component/photo.js b/src/component/photo.js new file mode 100644 index 0000000..cbc3a05 --- /dev/null +++ b/src/component/photo.js @@ -0,0 +1,44 @@ +import React, {Component} from 'react'; +import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native'; + +import Color from '../style/color' + + +export default class Photo extends Component { + + constructor(props) { + super(props); + + if(props.uri) { + this.formatUri = props.uri.replace('w240-h320', 'w320-h320-c320:320-q75'); + } + } + + render() { + return this.formatUri ? ( + {}} + style={localStyle.photoBox}> + + + + ) : null; + } +} + +const localStyle = StyleSheet.create({ + photoBox: { + width: 160, + height: 160, + marginTop: 15, + backgroundColor: Color.spaceBackground, + padding: 0, + borderRadius: 5 + }, + photo: { + flexGrow: 1, + width: 160, + height: 160, + borderRadius: 5 + } +});