React Native Android TextInput 在切换到表情符号时消失在键盘下方

Question

我们将TextInput放在KeyboardAvoidingView中，一切都很好，直到用户切换键盘以选择表情符号。此时，键盘的大小会发生变化，并覆盖TextInput。

虽然可以输入表情符号，但用户无法再看到自己的文本内容。

以下是我们的代码：

const headerHeight = useHeaderHeight();

...

<KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      keyboardVerticalOffset={headerHeight}
      style={styles.screen}
    >
      <ScrollView keyboardShouldPersistTaps="handled">
        <View style={styles.radContainer}>
          <TextInput
              style={styles.addCommentInput}
              value={comment}
              onChangeText={changeCommentHandler}
              onSubmitEditing={() => {
                sendCommentHandler();
              }}
           />
        </View>
      </ScrollView>
</KeyboardAvoidingView>

...

const styles = StyleSheet.create({
  screen: {
    alignContent: "space-between",
    backgroundColor: styleConstants.colors.silver03,
    flex: 1,
    marginBottom: 10,
  },
  radContainer: {
    padding: 10,
  },
  addCommentInput: {
    backgroundColor: "#fff",
    borderColor: styleConstants.colors.silver01,
    borderRadius: 8,
    borderWidth: 1,
    fontFamily: "work-sans_regular",
    fontSize: 14,
    height: 40,
    paddingBottom: 8,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 8,
    textAlignVertical: "center",
  },
});

我们正在使用带有Expo SDK44的React Native。您所看到的GIF来自于在Nokia Android 10版本上进行的测试飞行二进制文件。

- Kurt Lagerbier

Answer 1

这个问题与React Native有关，在Github上有相关的PR，虽然已经合并，但在当前版本的React Native 0.70.6中尚未启用。您可以手动添加修复代码并保持有效性，直到它被添加到RN中，使用patch-package。

- root