react-native中textarea的替代品是什么？答案

【问题标题】：What is an alternative of textarea in react-native?react-native中textarea的替代品是什么？
【发布时间】：2017-01-16 14:24:28
【问题描述】：

是否有任何用于 react-native 的内置文本区域组件？我已经尝试实现这些：

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

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

但得到一个错误“预期组件类得到对象对象”。

【问题讨论】：

标签： react-native

【解决方案1】：

是的，有。叫TextInput，普通的TextInput组件支持多行。

只需将以下属性分配给您的 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

【讨论】：

【解决方案2】：

如果你想看到你的TextInput 组件就像一个文本区域，你需要添加这个

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

【讨论】：

textAlignVertical: 'top' 是我一直在寻找的东西，谢谢。这真的很棒
你帮我处理 textAlignVertical: 'top'。谢谢
或者您可以直接使用textAlignVertical="top" 作为道具，但目前仅支持android
支持“textAlignVertical”

【解决方案3】：

我通过以下方式将 TextInput 组件包装到 View 中，从而在 react-native 中构建文本区域：

  <View style={styles.textAreaContainer} >
    <TextInput
      style={styles.textArea}
      underlineColorAndroid="transparent"
      placeholder="Type something"
      placeholderTextColor="grey"
      numberOfLines={10}
      multiline={true}
    />
  </View>

...

const styles = StyleSheet.create({
  textAreaContainer: {
    borderColor: COLORS.grey20,
    borderWidth: 1,
    padding: 5
  },
  textArea: {
    height: 150,
    justifyContent: "flex-start"
  }
})

【讨论】：

谢谢。超级容易/简单的组合。
出于某种原因 numberOfLines 没有为我做任何事情。我不确定这个属性是否应该有助于扩展 textInput 的可点击区域或者究竟是什么。
@Yokhen 假设 numberOfLines 仅允许您在将 "multiple" 设置为 true （其默认值为 false，因此请注意此属性）的组合中键入多行文本。另一方面，我在上面示例中添加的“textAreaContainer”和“textArea”样式对于使文本输入看起来像一个文本区域很有用。
@NachoJusticiaRamos 是的，我在文档中读到过，但 numberOfLines 至少在 iOS 模拟器中什么也没做。但我认为这可能是另一个线程的问题。

【解决方案4】：

我正在使用这个组件： 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}
/>

【讨论】：

【解决方案5】：

如果您只使用 react-native 组件，您的选择是 TextInput

正如“funkysoul”所解释的：

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

multiline = {true}
numberOfLines = {4}

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

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

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

【讨论】：