为什么IOS多行文本输入在React原生纸质对话框中无法正常工作？

Question

我是 React Native 的初学者，我正在尝试在对话框中进行多行文本输入（来自 React Native Paper 模块的对话框组件），它在 Android 和 Web 上完美运行，但在 IOS 上不起作用。

这是我的代码：

      <Dialog
        visible={isDialogVisible}
        onDismiss={() => setIsDialogVisible(false)}>
        <TextInput
          multiline
          style={{
            height: 150,
            borderWidth: 1,
          }}
          value={inputVal}
          onChangeText={(text) => setInputVal(text)}
        />

        <Dialog.Actions>
          <Button onPress={() => setIsDialogVisible(false)}>Done</Button>
        </Dialog.Actions>
      </Dialog>

您还可以查看此演示链接：

https://snack.expo.dev/@mohsenkh90/react-native-paper-dialog-with-textinput

Answer 1

这似乎是 React Native 中的一个已知问题。

1. 门户内的文本输入有问题
2. 当 TextInput 位于 Portal 内时，光标在编辑时会跳转

这里提供了一个解决方法：通过为门户创建 HOC

或者一个简单的解决方法是将

defaultValue

作为支柱传递给

TextInput

而不是

value

  <Dialog
    visible={isDialogVisible}
    onDismiss={() => setIsDialogVisible(false)}>
    <TextInput
      multiline
      style={{
        height: 150,
        borderWidth: 1,
      }}
      defaultValue={inputVal}                     //changed the prop
      onChangeText={(text) => setInputVal(text)}
    />

    <Dialog.Actions>
      <Button onPress={() => setIsDialogVisible(false)}>Done</Button>
    </Dialog.Actions>
  </Dialog>

参考：https://stackoverflow.com/a/64945998/10657559