如何在多行中换行文本反应本机 textInput

Nav*_*een 6 textinput react-native react-native-textinput

我正在尝试在 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>
Run Code Online (Sandbox Code Playgroud)

风格是,

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"
  },
Run Code Online (Sandbox Code Playgroud)

Ank*_*dar 13

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

  • 顺便说一句,有一次我不仅被要求启用“换行”,而且还要求“enter”接受多行 TextInput 中的文本(正常行为:“enter”添加新行)。完成这件事花了一些时间;最后,我得到了这个属性`blurOnSubmit`,当设置为true时(在多行TextInput中)意味着按回车键将触发onSubmitEditing。[参考](https://reactnative.dev/docs/textinput#bluronsubmit)。 (4认同)