react-native - 如何在多行中包装文本以响应 native textInput

标签 react-native textinput 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>

样式是
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"
  },

最佳答案

TextInput组件中,使用 Prop multiline={true},这应该可以解决您的问题。同样,如果要控制文本对齐方式,则可以使用textAlignVertical Prop 。
在此链接中查找更多详细信息-https://facebook.github.io/react-native/docs/textinput#multiline

关于react-native - 如何在多行中包装文本以响应 native textInput,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56352272/

相关文章:

reactjs - 如何调用平面列表中的另一个 api?

reactjs - DevTools v4 与此版本的 React 不兼容

javascript - 用于 React Native/JS 的 SHA256 ComputeHash(来自 C#)的等效版本

android - 如何在 Flutter 中检索没有文本字段的文本输入

javascript - 使用 react-bootstrap 获取输入文本的值

android - React Native 获取调用在 iOS 中工作,但在 Android 中不工作

react-native - 输入每个字符后,我的 React Native 文本输入失去焦点

react-native - TextInput - Android 和 iOS 中的不同高度

react-native - 在 react native 文本输入中更改单个单词的颜色

flash - 滚动文本延迟中的 Flex Mobile textInput