如何在多行反应本机 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"
  },

Answer 1

在TextInput组件中，使用道具multiline={true}，这应该可以解决您的问题。另外，如果你想控制文本对齐行为，你可以使用 textAlignVertical 属性。在此 link - https://facebook.github.io/react-native/docs/textinput#multiline

中查找更多详细信息

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

How to wrap text within multiline react native textInput

textinput

react-native

react-native-textinput