点击textInput后出现键盘时无法处理UI

Question

下面是在 ios 中运行的代码，当键盘出现时，UI 不会受到任何干扰。但在 Android 中，我在单击 textInput 后处理键盘时遇到问题。

return (
        <View style={{
          flex: 1,
          backgroundColor: this.state.changeThemeSwitch ?
            helpers.whiteColor() : helpers.blackColor(),
          marginBottom: 10,
        }}>
          <CustomStatusBar />
          {this.renderHeader()}
          <View style={{
            justifyContent: "flex-end", alignItems: "flex-end",
            flex: 1,
          }}>

            <View
              style={{
                alignSelf: "flex-end",
                justifyContent: "flex-end", flexDirection: 'column',
                marginBottom: this.state.parentViewTopMargin,
                width: "100%",
              }}>

              <ScrollView
                ref={(ref) => this.scrollViewRef = ref}
                onLayout={() => {

                  if (this.scrollViewRef) {
                    this.scrollViewRef.scrollToEnd({ animated: false })
                  }
                }}
                keyboardShouldPersistTaps="handled">

                {messages &&
                  messages.map((item, index) =>
                    this.renderItem(item, index))}

              </ScrollView>

              <View style={{ ...styles.inputContainer }}>
                <TouchableOpacity onPress={this.showKeyboard}>
                  <FontAwesomeIcon
                    icon={faMicrophone}
                    size={30}
                    style={{
                      color: "#3A913F",
                    }}>
                  </FontAwesomeIcon>
                </TouchableOpacity>
                <TextInput ref={this.inputRef}
                  keyboardType='default'
                  multiline
                  style={{
                    flex: 1,
                    marginLeft: 10,
                    backgroundColor: this.state.changeThemeSwitch ? helpers.whiteColor() : helpers.blackColor(),
                    color: this.state.changeThemeSwitch ? helpers.blackColor() : helpers.whiteColor(),
                    borderRadius: 6,
                    paddingHorizontal: 16,
                    paddingVertical: 8,
                    marginRight: 10,
                    borderWidth: 1.5,
                    borderColor: "#3A913F"
                  }}
                  placeholder="Type your query..."
                  placeholderTextColor={this.state.changeThemeSwitch
                    ? helpers.blackColor()
                    : helpers.whiteColor()}
                  value={message}
                  onChangeText={(text) => this.setState({ message: text })}
                />
                <TouchableOpacity onPress={this.handleSend}>
                  <FontAwesomeIcon
                    icon={faPaperPlaneTop}
                    size={30}
                    style={{
                      color: "#3A913F",
                    }}>
                  </FontAwesomeIcon>
                </TouchableOpacity>
              </View>

            </View>
          </View>
        </View>
      );

我尝试使用 Android 的 KeyboardAvoidingView 并将行为设置为“填充”|| “高度”，但它们都不起作用。

我是否缺少渲染中 mainView 的一些样式，或者是否有其他方法可以在 android 中解决此问题？

Answer 1

使用此视口元标记可以避免键盘显示期间 UI 扭曲。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">