javascript - 如何防止键盘将覆盖 View 向上推?

标签 javascript react-native react-native-elements

我不希望键盘在键入时将 View 向上推。键盘有足够的空间不会插入覆盖层,但它仍在这样做。我试过在叠加层内外使用 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>
    );
  }

最佳答案

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

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>
        )
    }
}

关于javascript - 如何防止键盘将覆盖 View 向上推?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59122488/

相关文章:

Javascript OnBlur 不工作

javascript - Vuejs 获取编辑后的输入

react-native - react native : "A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade"

android - React Native - 如何使 ScrollView 内的 KeyboardAvoidingView 适用于所有设备?

javascript - 如何禁用react-native-elements复选框touchableopacity?

javascript - 为什么不委托(delegate)滚动工作?

javascript - 如何使用 EAS BUILD 解决 IOS 应用启动时崩溃的问题

reactjs - 数组中的项目已删除但 UI 未在 React Native 中更新

react-native - React Native Elements 主题提供程序无法正常工作?

javascript - 如何正确处理axios错误以及如何获取详细的错误描述?