React Native Pell Rich Editor 和 QuickType(预测文本)

问题描述 投票:0回答:1

React Native Pell Rich Editor 是否支持 iOS 上的 QuickType(预测文本)栏?我在下面的组件中使用上面的库。效果很好,只是键盘上缺少 QuickType 栏。

因为富编辑器使用的是 WebView 组件,而不是任何 TextInput,这是否只是使用 Pell Rich Editor 库的成本,或者是否有一个我在阅读中没有找到的道具可以启用快速类型栏?还有其他支持 QuickType 输入的 React Native 富文本编辑器吗?

    <SafeAreaView>
      <ScrollView style={styles.outerContainer}>
        <RichEditor
          maxLength={maxLength}
          disabled={false}
          editorStyle={styles.richEditor}
          ref={richTextRef}
          placeholder={isNote ? "Add your note..." : "Add an explanation here…"}
          onChange={handleEditorChange}
          initialContentHTML={text}
          multiline
          scrollEnabled
          sentry-label={sentryLabel}
        />
      </ScrollView>

      <RichToolbar
        editor={richTextRef}
        actions={[
          actions.setBold,
          actions.setItalic,
          actions.setUnderline,
          actions.setStrikethrough,
          actions.insertBulletsList,
          actions.insertOrderedList,
          actions.checkboxList,
          actions.indent,
          actions.undo,
        ]}
        style={styles.toolbar}
      />

      <HelperText
        type={showErrorInsteadOfInfo ? "error" : "info"}
        testID={`${testID}-remaining-characters`}
      >
        {text ? maxLength - text?.length : maxLength} characters remaining
      </HelperText>
    </SafeAreaView>

Image of editor without QuickType

其他文本输入包括 iOS 键盘上的 QuickType 栏。佩尔·里奇编辑则不然。尝试使用道具并包装在不同的组件中并没有改变这一点,所以我怀疑它是内置的。任何人都可以确认或更正这一点吗?如果确认的话,还有其他富文本选项吗?佩尔似乎是目前最好的。

ios react-native keyboard rich-text-editor quicktype
1个回答
0
投票

通过添加以下属性解决了这个问题:autoCorrect、autoCompleteType、spellCheck。最终组件如下所示:

          <RichEditor
        maxLength={maxLength}
        disabled={false}
        editorStyle={styles.richEditor}
        ref={richTextRef}
        placeholder={placeholder}
        onChange={handleEditorChange}
        initialContentHTML={text}
        multiline
        scrollEnabled
        sentry-label={sentryLabel}
        autoCorrect
        autoCompleteType
        spellCheck
      />
© www.soinside.com 2019 - 2024. All rights reserved.