Question

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

我希望能找到适合IOS和Android的NSAttributedString和SpannableString的东西，例如Evernote。

Answer 1

这是一个TextArea组件，当你按下＆＃34; new line＆＃34;时，它会自动包装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}
            />
        )
    }

}

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

1 个答案: