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 的本机反应。 您看到的 GIF 来自诺基亚 Android 版本 10 上的测试飞行二进制文件。

Answer 1

这个问题与React Native有关，这里是Github中的PR，它在当前版本的React Native 0.70.6中已合并但未激活，您可以手动添加固定代码并保持有效性，直到它被添加到RN，使用补丁-包裹