解决键盘问题

This commit is contained in:
mx1700 2019-07-28 21:49:45 +08:00
parent 78057af2c2
commit 1d3fde97f1
4 changed files with 16 additions and 15 deletions

6
package-lock.json generated
View file

@ -10902,9 +10902,9 @@
"integrity": "sha1-1H4UlDw3k44of71jnk23zrf9iRc=" "integrity": "sha1-1H4UlDw3k44of71jnk23zrf9iRc="
}, },
"react-native-iphone-x-helper": { "react-native-iphone-x-helper": {
"version": "1.0.2", "version": "1.2.1",
"resolved": "http://registry.npm.taobao.org/react-native-iphone-x-helper/download/react-native-iphone-x-helper-1.0.2.tgz", "resolved": "https://registry.npm.taobao.org/react-native-iphone-x-helper/download/react-native-iphone-x-helper-1.2.1.tgz",
"integrity": "sha1-fbylMJMPfBzoYzzI/RO6lBApkuE=" "integrity": "sha1-ZF4v+7tJ6AhEu0y740oSb9oeZ3I="
}, },
"react-native-keyboard-spacer": { "react-native-keyboard-spacer": {
"version": "0.4.1", "version": "0.4.1",

View file

@ -21,7 +21,7 @@
"react-native-image-pan-zoom": "^2.1.11", "react-native-image-pan-zoom": "^2.1.11",
"react-native-image-progress": "^1.1.1", "react-native-image-progress": "^1.1.1",
"react-native-image-resizer": "^1.0.0", "react-native-image-resizer": "^1.0.0",
"react-native-iphone-x-helper": "^1.0.2", "react-native-iphone-x-helper": "^1.2.1",
"react-native-keyboard-spacer": "^0.4.1", "react-native-keyboard-spacer": "^0.4.1",
"react-native-navigation": "^2.18.5", "react-native-navigation": "^2.18.5",
"react-native-root-toast": "^3.0.0", "react-native-root-toast": "^3.0.0",

View file

@ -159,8 +159,8 @@ export default class CommentInput extends Component {
const localStyle = StyleSheet.create({ const localStyle = StyleSheet.create({
container: { container: {
height: Api.IS_IPHONEX ? 66 : 56, height: 56,
backgroundColor: '#eee', backgroundColor: Color.navBackground,
elevation: 3, elevation: 3,
borderColor: '#bbb', borderColor: '#bbb',
borderTopWidth: StyleSheet.hairlineWidth borderTopWidth: StyleSheet.hairlineWidth
@ -183,7 +183,7 @@ const localStyle = StyleSheet.create({
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
right: 0, right: 0,
paddingBottom: Api.IS_IPHONEX ? 22 : 12, paddingBottom: 12,
paddingRight:12, paddingRight:12,
paddingTop: 12 paddingTop: 12
}, },

View file

@ -6,7 +6,8 @@ import {
View, View,
ScrollView, ScrollView,
DeviceEventEmitter, DeviceEventEmitter,
Keyboard Keyboard,
SafeAreaView
} from 'react-native'; } from 'react-native';
import {Navigation} from 'react-native-navigation'; import {Navigation} from 'react-native-navigation';
import KeyboardSpacer from "react-native-keyboard-spacer"; import KeyboardSpacer from "react-native-keyboard-spacer";
@ -21,7 +22,7 @@ import Event from '../util/event';
import DiaryFull from '../component/diary/diaryFull'; import DiaryFull from '../component/diary/diaryFull';
import DiaryAction from '../component/diary/diaryAction'; import DiaryAction from '../component/diary/diaryAction';
import CommentInput from '../component/comment/commentInput'; import CommentInput from '../component/comment/commentInput';
import { getBottomSpace } from 'react-native-iphone-x-helper';
function getTodayStr() { function getTodayStr() {
let now = new Date(); let now = new Date();
@ -197,9 +198,9 @@ export default class DiaryDetailPage extends Component {
} }
return ( return (
<View style={localStyle.wrap}> <SafeAreaView style={localStyle.wrap}>
<ScrollView ref={(r)=>this.scroll = r} <ScrollView ref={(r)=>this.scroll = r}
style={{flex: 1}} style={{flex: 1, backgroundColor: 'white'}}
onContentSizeChange={(width, height) => { onContentSizeChange={(width, height) => {
if(this.props.needScrollToBottom || this.state.needScrollToBottom) { if(this.props.needScrollToBottom || this.state.needScrollToBottom) {
this.scroll.scrollTo({y: height}); this.scroll.scrollTo({y: height});
@ -228,9 +229,9 @@ export default class DiaryDetailPage extends Component {
} }
{ {
Api.IS_IOS ? <KeyboardSpacer topSpacing={Api.IS_IPHONEX ? -10 : 0} /> : null Api.IS_IOS ? <KeyboardSpacer topSpacing={-getBottomSpace()} /> : null
} }
</View> </SafeAreaView>
); );
} }
} }
@ -238,8 +239,8 @@ export default class DiaryDetailPage extends Component {
const localStyle = StyleSheet.create({ const localStyle = StyleSheet.create({
wrap: { wrap: {
flex: 1, flex: 1,
flexDirection: 'column' flexDirection: 'column',
, backgroundColor: 'white' backgroundColor: Color.navBackground,
}, },
container: { container: {
alignItems:'center', alignItems:'center',