mirror of
https://github.com/timepill/timepill-app.git
synced 2025-04-30 09:59:31 +08:00
修复评论框换行后,高度不增加的问题
This commit is contained in:
parent
729d5405dc
commit
f3c489ade3
1 changed files with 35 additions and 5 deletions
|
@ -7,7 +7,8 @@ import {
|
||||||
TextInput,
|
TextInput,
|
||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
Alert,
|
Alert,
|
||||||
DeviceEventEmitter
|
DeviceEventEmitter,
|
||||||
|
Platform,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import Icon from 'react-native-vector-icons/Ionicons';
|
import Icon from 'react-native-vector-icons/Ionicons';
|
||||||
import KeyboardSpacer from "react-native-keyboard-spacer";
|
import KeyboardSpacer from "react-native-keyboard-spacer";
|
||||||
|
@ -17,6 +18,7 @@ import Color from '../../style/color';
|
||||||
import Api from '../../util/api';
|
import Api from '../../util/api';
|
||||||
import Event from '../../util/event';
|
import Event from '../../util/event';
|
||||||
|
|
||||||
|
const DefaultInputHeight = 56;
|
||||||
|
|
||||||
export default class CommentInput extends Component {
|
export default class CommentInput extends Component {
|
||||||
|
|
||||||
|
@ -31,7 +33,8 @@ export default class CommentInput extends Component {
|
||||||
|
|
||||||
content: '',
|
content: '',
|
||||||
replyUserId: 0,
|
replyUserId: 0,
|
||||||
replyUserName: ''
|
replyUserName: '',
|
||||||
|
inputHeight: DefaultInputHeight,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -93,8 +96,8 @@ export default class CommentInput extends Component {
|
||||||
this.setState({
|
this.setState({
|
||||||
content: '',
|
content: '',
|
||||||
replyUserId: 0,
|
replyUserId: 0,
|
||||||
replyUserName: ''
|
replyUserName: '',
|
||||||
|
inputHeight: DefaultInputHeight,
|
||||||
}, () => {
|
}, () => {
|
||||||
DeviceEventEmitter.emit(Event.updateComments);
|
DeviceEventEmitter.emit(Event.updateComments);
|
||||||
});
|
});
|
||||||
|
@ -108,9 +111,34 @@ export default class CommentInput extends Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
resetInputHeight(event) {
|
||||||
|
let height = 0;
|
||||||
|
if(Platform.OS === "ios") {
|
||||||
|
//iOS 一开始是 29,只要一编辑就变成每行 18,36
|
||||||
|
const h = event.nativeEvent.contentSize.height + 37;
|
||||||
|
const max = 74 + 37;
|
||||||
|
height = h > max ? max : h
|
||||||
|
} else {
|
||||||
|
//android 一开始是 41.5,57,75
|
||||||
|
const h = event.nativeEvent.contentSize.height;
|
||||||
|
const max = 107;
|
||||||
|
if (h < DefaultInputHeight) {
|
||||||
|
height = DefaultInputHeight;
|
||||||
|
} else {
|
||||||
|
height = h + (DefaultInputHeight - 40);
|
||||||
|
height = height > max ? max : height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.state.inputHeight !== height) {
|
||||||
|
this.setState({
|
||||||
|
inputHeight: height,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View style={localStyle.container}>
|
<View style={[localStyle.container, { height: this.state.inputHeight }]}>
|
||||||
<TextInput style={localStyle.input}
|
<TextInput style={localStyle.input}
|
||||||
selectionColor={Color.light}
|
selectionColor={Color.light}
|
||||||
|
|
||||||
|
@ -136,6 +164,7 @@ export default class CommentInput extends Component {
|
||||||
|
|
||||||
this.setState(state);
|
this.setState(state);
|
||||||
}}
|
}}
|
||||||
|
onContentSizeChange={this.resetInputHeight.bind(this)}
|
||||||
/>
|
/>
|
||||||
<TouchableOpacity style={localStyle.buttonWrap}
|
<TouchableOpacity style={localStyle.buttonWrap}
|
||||||
onPress={this.sendComment.bind(this)}>
|
onPress={this.sendComment.bind(this)}>
|
||||||
|
@ -166,6 +195,7 @@ const localStyle = StyleSheet.create({
|
||||||
borderTopWidth: StyleSheet.hairlineWidth
|
borderTopWidth: StyleSheet.hairlineWidth
|
||||||
},
|
},
|
||||||
input: {
|
input: {
|
||||||
|
flexGrow: 1,
|
||||||
borderColor: '#bbb',
|
borderColor: '#bbb',
|
||||||
backgroundColor: '#fff',
|
backgroundColor: '#fff',
|
||||||
borderWidth: StyleSheet.hairlineWidth,
|
borderWidth: StyleSheet.hairlineWidth,
|
||||||
|
|
Loading…
Reference in a new issue