react-native - 是否有任何 React Native 文本编辑器组件？

Question

我正在为没有 WebView 的 React Native 寻找一个文本编辑器组件。我发现只有 react-native-zss-rich-text-editor，但它使用了 WebView，我认为这很糟糕。

我希望找到一些可以以原生方式与 NSAttributedString 和 SpannableString 一起用于 IOS 和 Android 的东西，例如在 Evernote 中。

Evernote Android app text editor

Answer 1

这是一个 TextArea 组件，当您按下“换行”按钮时，它会包装 TextInput 并自动调整其大小

import React, { PropTypes } from 'react'
import { TextInput } from 'react-native'

export default class TextArea extends React.Component {

    static propTypes = {
        text: PropTypes.string.isRequired,
        onChangeText: PropTypes.func.isRequired,
        initialHeight: PropTypes.number,
        isEditing: PropTypes.bool,
        scrollViewRef: PropTypes.object,
    }

    static defaultProps = {
        initialHeight: 40,
        isEditing: true,
        scrollViewRef: null,
    }

    state = {
        height: this.props.initialHeight,
    }

    componentWillUnmount(){
        this._isUnmounted = false
    }

    focus(){
        this.refs.textInput.focus()
    }

    blur(){
        this.refs.textInput.blur()
    }

    _contentSizeChanged = e => {
        this.setState({
            height: e.nativeEvent.contentSize.height,
        }, () => {
            if (this.props.scrollViewRef) {
                setTimeout(() => {
                    if (!this._isUnmounted) this.props.scrollViewRef.scrollToEnd()
                }, 0)
            }
        })
    }

    _onChangeText = text => {
        this.props.onChangeText(text)
    }

    render(){
        return (
            <TextInput
                ref = "textInput"
                multiline
                value = {this.props.text}
                style = {{ height: this.state.height, color: 'black', flex: 1 }}
                onChangeText = {this._onChangeText}
                onContentSizeChange = {this._contentSizeChanged}
                editable = {this.props.isEditing}
                blurOnSubmit = {false}
            />
        )
    }

}