我正在尝试在 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
组件中,使用 props multiline={true}
,这应该可以解决您的问题。另外,如果您想控制文本对齐行为,可以使用 textAlignVertical
属性。
在此链接中查找更多详细信息 - https://facebook.github.io/react-native/docs/textinput#multiline
我遇到了无法使用
multiline={true}
的问题,因为它扰乱了我的 KeyboardAvoidingView
逻辑(已知错误)。我的解决方法是固定高度并将 textAlign: 'justify'
设置为我的 TextInputs 的 style 属性。现在单词似乎已经换行了。