Question

是否有反应原生的内置文本区域组件？我试图实现这些：

https://github.com/buildo/react-autosize-textarea

https://github.com/andreypopp/react-textarea-autosize

但是收到错误“预期组件类得到了对象对象”。

Answer 1

是的。它叫做TextInput，普通的TextInput Component支持多行。

只需将以下属性分配给TextInput组件

即可

multiline = {true}
numberOfLines = {4}

最后你应该有这个：

<TextInput
    multiline={true}
    numberOfLines={4}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}/>

来源https://facebook.github.io/react-native/docs/textinput

Answer 2

如果要像文本区域一样查看TextInput组件，则需要添加

<TextInput
    multiline={true}
    numberOfLines={10}
    style={{ height:200, textAlignVertical: 'top',}}/>

Answer 3

我正在使用这个组件： https://www.npmjs.com/package/react-native-autogrow-textinput

它会自动扩展文本增长。我创建了自己的可重用组件，其中包含autogrow-textinput作为其一部分，在组件内部看起来像：

<AutoGrowingTextInput 
    minHeight={40}
    maxHeight={maxHeight} // this is a flexible value that I set in my 
        component, where I use this reusable component, same below, unless specified the other
    onChangeText={onChangeText}
    placeholder={placeholder}
    placeholderTextColor='#C7C7CD'
    style={inputStyle}
    value={value}
/>

Answer 4

如果您仅使用react-native组件，则选项为TextInput

正如“funkysoul”所解释的那样：

只需将以下属性分配给TextInput组件
即可
multiline = {true}
  numberOfLines = {4}

如果要将此组件视为经典textarea（大于内联文本输入），通常需要添加height样式属性。请参阅以下示例：

 <TextInput
     multiline={true}
     numberOfLines={10}
     style={{ height:200, backgroundColor:'red'}}
 />

我添加了backgroundColor以更好地理解height角色。请不要在您的项目中使用它;）

反应原生的textarea的替代品是什么？

4 个答案: