mirror of
https://github.com/timepill/timepill-app.git
synced 2025-04-30 09:59:31 +08:00
1. 日记详情页回复框
This commit is contained in:
xuwenyang
parent
84ce205ee6
commit
a5446853d6
7 changed files with 192 additions and 13 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -10842,6 +10842,11 @@
|
|||
"resolved": "http://registry.npm.taobao.org/react-native-iphone-x-helper/download/react-native-iphone-x-helper-1.0.2.tgz",
|
||||
"integrity": "sha1-fbylMJMPfBzoYzzI/RO6lBApkuE="
|
||||
},
|
||||
"react-native-keyboard-spacer": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "http://registry.npm.taobao.org/react-native-keyboard-spacer/download/react-native-keyboard-spacer-0.4.1.tgz",
|
||||
"integrity": "sha1-RvGKMgQyCYol6p+on1FD3SVNMy0="
|
||||
},
|
||||
"react-native-navigation": {
|
||||
"version": "2.18.5",
|
||||
"resolved": "https://registry.npm.taobao.org/react-native-navigation/download/react-native-navigation-2.18.5.tgz",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"react-native-device-info": "^1.6.1",
|
||||
"react-native-elements": "^0.19.0",
|
||||
"react-native-iphone-x-helper": "^1.0.2",
|
||||
"react-native-keyboard-spacer": "^0.4.1",
|
||||
"react-native-navigation": "^2.18.5",
|
||||
"react-native-root-toast": "^3.0.0",
|
||||
"react-native-tab-view": "^1.3.0",
|
||||
|
|
|
|||
119
src/component/comment/commentInput.js
Normal file
119
src/component/comment/commentInput.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import React, {Component} from 'react';
|
||||
import {StyleSheet, Text, View, ActivityIndicator, TextInput, TouchableOpacity} from 'react-native';
|
||||
import Icon from 'react-native-vector-icons/Ionicons';
|
||||
import KeyboardSpacer from "react-native-keyboard-spacer";
|
||||
|
||||
import Touchable from '../touchable';
|
||||
import Color from '../../style/color';
|
||||
import Api from '../../util/api';
|
||||
|
||||
|
||||
export default class CommentInput extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
sending: false
|
||||
};
|
||||
}
|
||||
|
||||
sendComment() {
|
||||
this.setState({sending: true});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={localStyle.container}>
|
||||
<TextInput style={localStyle.input}
|
||||
selectionColor={Color.light}
|
||||
|
||||
ref="commentInput"
|
||||
|
||||
placeholder="回复日记"
|
||||
value={this.state.comment_content}
|
||||
|
||||
autoCorrect={false}
|
||||
maxLength={500} multiline={true}
|
||||
showsVerticalScrollIndicator={false}
|
||||
underlineColorAndroid="transparent"
|
||||
|
||||
onChangeText={() => {}}
|
||||
/>
|
||||
<TouchableOpacity style={localStyle.buttonWrap}
|
||||
onPress={this.sendComment.bind(this)}>
|
||||
|
||||
<View style={localStyle.button}>
|
||||
<Icon name="md-arrow-round-up" size={22} color="#fff" />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{this.state.sending
|
||||
? (
|
||||
<View style={localStyle.sending}>
|
||||
<ActivityIndicator animating={true} color={Color.light} size="small"/>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{
|
||||
!Api.IS_ANDROID
|
||||
? <KeyboardSpacer topSpacing={Api.IS_IPHONEX ? -30 : 0} />
|
||||
: null
|
||||
}
|
||||
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const localStyle = StyleSheet.create({
|
||||
container: {
|
||||
height: 56,
|
||||
backgroundColor: '#eee',
|
||||
elevation: 3,
|
||||
borderColor: '#bbb',
|
||||
borderTopWidth: StyleSheet.hairlineWidth
|
||||
},
|
||||
input: {
|
||||
flexGrow: 1,
|
||||
borderColor: '#bbb',
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: StyleSheet.hairlineWidth,
|
||||
borderRadius: 19,
|
||||
paddingRight: 40,
|
||||
paddingLeft: 15,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 12,
|
||||
fontSize: 12,
|
||||
lineHeight: 24,
|
||||
margin: 8
|
||||
},
|
||||
buttonWrap: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
paddingBottom: 12,
|
||||
paddingRight:12,
|
||||
paddingTop: 12
|
||||
},
|
||||
button: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
backgroundColor: Color.light,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 16
|
||||
},
|
||||
sending: {
|
||||
flexGrow: 1,
|
||||
opacity: 0.8,
|
||||
backgroundColor: "#fff",
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom:0,
|
||||
right:0,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
position: 'absolute'
|
||||
}
|
||||
});
|
||||
|
|
@ -63,8 +63,21 @@ export default class CommentList extends Component {
|
|||
</Touchable>
|
||||
)
|
||||
}}
|
||||
|
||||
ListHeaderComponent={() => {
|
||||
let count = this.state.comments.length;
|
||||
return (
|
||||
<View>
|
||||
<View style={localStyle.line} />
|
||||
<Text style={localStyle.header}>
|
||||
{count > 0 ? `共 ${count} 条回复` : '还没有人回复'}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}}
|
||||
>
|
||||
</FlatList>
|
||||
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
@ -73,8 +86,19 @@ export default class CommentList extends Component {
|
|||
const localStyle = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: Color.navBackground,
|
||||
backgroundColor: 'white',
|
||||
justifyContent: 'space-between',
|
||||
paddingBottom: Api.IS_IPHONEX ? 30 : 0
|
||||
},
|
||||
line: {
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
borderColor: Color.line,
|
||||
marginHorizontal: 15
|
||||
},
|
||||
header: {
|
||||
marginHorizontal: 16,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
color: Color.inactiveText
|
||||
}
|
||||
});
|
||||
|
|
@ -11,20 +11,33 @@ import CommentList from '../comment/commentList';
|
|||
|
||||
export default class DiaryFull extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.diary = props.diary;
|
||||
}
|
||||
|
||||
render() {
|
||||
let diary = this.props.diary;
|
||||
let diary = this.diary;
|
||||
if(!diary) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let user = diary.user;
|
||||
let editable = this.props.editable;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={localStyle.box}>
|
||||
<UserIcon iconUrl={user.iconUrl}></UserIcon>
|
||||
{user && user.iconUrl
|
||||
? <UserIcon iconUrl={user.iconUrl}></UserIcon> : null}
|
||||
|
||||
<View style={localStyle.body}>
|
||||
<View style={localStyle.title}>
|
||||
<Text style={localStyle.titleName} numberOfLines={1}>
|
||||
{user && user.name
|
||||
? ( <Text style={localStyle.titleName} numberOfLines={1}>
|
||||
{user.name}
|
||||
</Text>
|
||||
) : null}
|
||||
|
||||
<Text style={[localStyle.titleText, {flex: 1}]} numberOfLines={1}>
|
||||
《{diary.notebook_subject}》
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -3,19 +3,28 @@ import {Platform, StyleSheet, Text, View, ScrollView} from 'react-native';
|
|||
|
||||
import Color from '../style/color';
|
||||
import DiaryFull from '../component/diary/diaryFull';
|
||||
import CommentInput from '../component/comment/commentInput'
|
||||
|
||||
|
||||
export default class DiaryDetailPage extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={localStyle.wrap}>
|
||||
<ScrollView style={{flex: 1}}>
|
||||
<DiaryFull diary={this.props.diary}></DiaryFull>
|
||||
</ScrollView>
|
||||
|
||||
<CommentInput></CommentInput>
|
||||
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const localStyle = StyleSheet.create({
|
||||
|
||||
wrap: {
|
||||
flex: 1,
|
||||
flexDirection: 'column'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,12 +20,20 @@ export default class HomePage extends Component {
|
|||
Navigation.push(this.props.componentId, {
|
||||
component: {
|
||||
name: 'DiaryDetail',
|
||||
options: {
|
||||
bottomTabs: {
|
||||
visible: false,
|
||||
|
||||
// hide bottom tab for android
|
||||
drawBehind: true,
|
||||
animate: true
|
||||
}
|
||||
},
|
||||
passProps: {
|
||||
diary: diary
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue