代码之家  ›  专栏  ›  技术社区  ›  Naveed Sheriffdeen

如何在多行react native textinput中包装文本

  •  0
  • Naveed Sheriffdeen  · 技术社区  · 5 年前

    我试图在原生中实现多行文本输入,但是当用户键入文本时,它不会被包装,而是在同一行上水平写入。

    我的文本输入代码如下

    <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"
      },
    
    0 回复  |  直到 5 年前
        1
  •  1
  •   Ankur Sardar    5 年前

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