如何防止键盘向上推动覆盖视图？答案

【问题标题】：How do I prevent keyboard from pushing overlay view up?如何防止键盘向上推动覆盖视图？
【发布时间】：2019-12-01 04:22:46
【问题描述】：

我不希望键盘在打字时将视图向上推。键盘有足够的空间不推动覆盖层，但它仍在这样做。我尝试在覆盖层内外使用keyboardavoidingview定位和填充，但没有运气。

  render() {
    return (
        <Overlay
          isVisible={this.state.isVisible}
          width="auto"
          height="auto"
          overlayStyle={{ width: "90%", height: "50%", marginBottom: "70%" }}
        >
          <View>
            <Text>Schedule</Text>
            <TextInput
              label="Event"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <TextInput
              label="Date & Time"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <TextInput
              label="Location"
              style={{ width: "95%", margin: "3%" }}
              theme={{ colors: { primary: Themes.primaryTheme } }}
            />
            <View style={{ flexDirection: "row" }}>
              <Button
                mode="text"
                style={{ width: "40%", margin: "3%" }}
                onPress={() => this.setState({ isVisible: false })}
              >
                Cancel
              </Button>
              <Button
                mode="contained"
                style={{ width: "40%", margin: "3%" }}
                onPress={() => this.setState({ isVisible: false })}
              >
                Create
              </Button>
            </View>
          </View>
        </Overlay>
    );
  }

【问题讨论】：

keyboardavoidingview在android中的行为很奇怪，您可以创建一个自定义keyboardavoidingview并为android使用一个简单的View。
@PooyaHaratian 我该怎么做？会不会更麻烦？
是的，我总是在键盘方面遇到一些麻烦。我不确定Overlay 是否在内部使用KeyboardAvoidingView（如果有，我想你应该忘记它）。如果没有，您可以尝试检查设备操作系统，iOS 使用KeyboardAvoiding，Android 使用View。或者只是尝试为每个人找到适当的行为。主要问题是它们在每个操作系统中的工作方式不同。

标签： javascript react-native react-native-elements

【解决方案1】：

我对这个问题的解决方案：

import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';

const windowHeight = Dimensions.get('window').height;

export default class Items extends Component {
    render(){
        return(
            <View  style={{flex:1}}>
                <ScrollView style={{flex:1}}>
                    <View style={{width:'100%', height:windowHeight }}>
                       /*Every thing inside this will shift up with out changing style */
                    </View>
                </ScrollView>
            </View>
        )
    }
}

【讨论】：

我不希望它向上移动。我提到有足够的空间让它留在原地。
如果你指定了View的高度，你的问题就解决了，只要删除scrollview组件就可以了，

【解决方案2】：

import {KeyboardAvoidingView} from 'react-native'

<KeyboardAvoidingView style={styles.container} 
behavior={Platform.OS == "ios" ? "padding" : "height"} enabled={false}>

在你的顶部使用它 render();

添加 prop enable={false} 到它；

这样的行为；

【讨论】：