如何在多行 React Native TextInput 中自动换行

Question

我正在尝试在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"
  },

- Naveed Sheriffdeen

Answer 1

在 TextInput 组件中，使用属性 multiline={true} 即可解决您的问题。如果您想要控制文本的对齐行为，可以使用 textAlignVertical 属性。 在此链接中查找更多详细信息 - https://facebook.github.io/react-native/docs/textinput#multiline

- Ankur Sardar

---

顺便说一下，曾经有人要求我不仅启用“换行”，还要使enter在多行文本输入框中接受文本（正常行为：enter添加新行）。这花费了我一些时间才完成；最终，我得到了这个属性blurOnSubmit，当设置为true（在多行文本输入框中）时，按下回车键将触发onSubmitEditing。参考。 - WalterAgile

Answer 2

2023 更新

我遇到了一个问题，我无法使用 multiline={true}，因为它会干扰我的 KeyboardAvoidingView 逻辑（已知的 bug）。我的解决方法是固定高度，并将 textAlign: 'justify' 设置为我的 TextInput 的样式属性。现在文字似乎可以自动换行了。

- Hugobop