如何在多行反应原生 textInput 中包装文本

Posted 2023-04-18

【中文标题】如何在多行反应原生 textInput 中包装文本

【英文标题】：How to wrap text within multiline react native textInput

【发布时间】：2019-10-14 13:49:55

【问题描述】：

我正在尝试在 react native 中实现多行文本输入，但是当用户键入时，文本不会被换行而是水平写在同一行上，

我的文本输入代码如下

<View style=[styles.container, props.containerStyles]>
  <TextInput 
    style=styles.placeholderStyle 
    placeholder="Placeholder text"
    value=this.state.reviewBody
    onChangeText=body => this.setState( reviewBody: body )
    numberOfLines=5
    textAlignVertical="top"
    textBreakStrategy="highQuality"
    underlineColorandroid="transparent"
    autoCorrect
  />
</View>

样式是，

const styles = StyleSheet.create(
  container: 
    flex: 1,
    borderWidth: 2,
    borderColor: "#f4f4f4",
    width: WIDTH - 40,
    maxWidth: WIDTH - 40,
    minWidth: WIDTH - 40,
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 5,
    marginTop: 10,
    flexWrap: "wrap",
  ,
  placeholderStyle: 
    fontSize: 11,
    padding: 0,
    flex: 1,
    width: WIDTH - 40,
    maxWidth: WIDTH - 40,
    minWidth: WIDTH - 40,
    flexWrap: "wrap",
    overflow: "scroll"
  ,

【参考方案1】：

在TextInput 组件中，使用道具multiline=true，这应该可以解决您的问题。另外，如果你想控制文本对齐行为，你可以使用textAlignVertical props。 在此链接中查找更多详细信息 - https://facebook.github.io/react-native/docs/textinput#multiline

【讨论】：

顺便说一句，有一次我被要求不仅启用“换行”，而且让enter接受多行TextInput中的文本（正常行为：enter添加新行） .完成这项工作需要一些时间。最后，我得到了这个属性blurOnSubmit，当设置为true（在多行TextInput 中）意味着按下return 将触发onSubmitEditing。 reference.