Question

我不希望键盘在键入时将视图向上推。键盘有足够的空间不推压覆盖层，但仍在这样做。我尝试过在覆盖层的内部和外部使用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>
    );
  }

Answer 1

问题在于使用react native元素的overlay组件。我切换到了https://www.npmjs.com/package/react-native-modals，当文本输入被聚焦时，它不会推动模式/叠加。

Answer 2

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

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

Answer 3

# A tibble: 4 x 4
#  id.s  NumberOfVisits Positive.Test Num.Positive
#  <chr>          <int> <chr>                <int>
#1 1                  2 Yes                      1
#2 2                  3 Yes                      2
#3 3                  4 Yes                      1
#4 4                  3 No                       0

在 render() 顶部使用它；

添加 prop enable={false};

和这样的行为；

如何防止键盘向上推叠加视图？

3 个答案: