React Native TextInput 不会以正确的内容长度增加高度
React Native TextInput doesn't increase height at correct content length
我正在尝试使用 React Native 元素和 React Native 实现多行扩展文本输入,但我似乎无法使其正常运行。该行为显示在以下屏幕截图中:
这里可以看到,文字明显多了一行,但是文字输入没有展开。
每当我再输入几个字符时,它就会扩展一点,但会向下扩展到键盘中。
添加另一行不会扩展键盘:
直到我再添加几个字符,直到最新的行是文本输入宽度的一半时,输入才会展开
这是我用于文本输入的代码:
<View style={{flexDirection:'row', backgroundColor: 'transparent', height: Math.max(45, this.state.viewHeight)}}>
<Input
containerStyle={{marginVertical: 0, width:300, marginLeft: 10}}
inputStyle={[styles.textInput, {height: Math.max(35, this.state.height)}]}
multiline
enablesReturnKeyAutomatically={true}
keyboardAppearance="dark"
placeholder=""
onContentSizeChange={(event) => {
if (this.state.height <= (35*6)){
this.setState({
height: event.nativeEvent.contentSize.height,
viewHeight: event.nativeEvent.contentSize.height })
}
}}
onChangeText={(message) => { this.setState({message})
}}
这是我的文本输入样式的代码:
textInput: {
paddingHorizontal: 12,
width: 100,
backgroundColor: '#F0F0F0',
borderStyle: 'solid',
marginLeft: -4,
overflow: 'hidden',
marginTop: 5,
borderWidth: 1,
borderColor: 'lightgrey',
borderRadius: 25,
},
似乎是内容大小更改事件在错误的时间触发,有什么办法可以将其设置为仅在新行达到特定长度时触发并向上扩展而不是向下扩展到键盘?
我终于让它工作了,我不得不更新到 expo 0.55 React Native sdk,因为我认为他们在 .54 之后实现了自动增长输入。然后我不得不从使用反应本机元素输入切换到仅反应本机文本输入,因为 RNE 似乎没有实现自动增长。最后我不得不改变我的高度设置,如果你像我一样设置一个确定的高度 height: {35}
它不会增长,所以我不得不对输入和输入的视图使用 minheight
是为了让他们一起成长。
我正在尝试使用 React Native 元素和 React Native 实现多行扩展文本输入,但我似乎无法使其正常运行。该行为显示在以下屏幕截图中:
这里可以看到,文字明显多了一行,但是文字输入没有展开。
每当我再输入几个字符时,它就会扩展一点,但会向下扩展到键盘中。
添加另一行不会扩展键盘:
直到我再添加几个字符,直到最新的行是文本输入宽度的一半时,输入才会展开
这是我用于文本输入的代码:
<View style={{flexDirection:'row', backgroundColor: 'transparent', height: Math.max(45, this.state.viewHeight)}}>
<Input
containerStyle={{marginVertical: 0, width:300, marginLeft: 10}}
inputStyle={[styles.textInput, {height: Math.max(35, this.state.height)}]}
multiline
enablesReturnKeyAutomatically={true}
keyboardAppearance="dark"
placeholder=""
onContentSizeChange={(event) => {
if (this.state.height <= (35*6)){
this.setState({
height: event.nativeEvent.contentSize.height,
viewHeight: event.nativeEvent.contentSize.height })
}
}}
onChangeText={(message) => { this.setState({message})
}}
这是我的文本输入样式的代码:
textInput: {
paddingHorizontal: 12,
width: 100,
backgroundColor: '#F0F0F0',
borderStyle: 'solid',
marginLeft: -4,
overflow: 'hidden',
marginTop: 5,
borderWidth: 1,
borderColor: 'lightgrey',
borderRadius: 25,
},
似乎是内容大小更改事件在错误的时间触发,有什么办法可以将其设置为仅在新行达到特定长度时触发并向上扩展而不是向下扩展到键盘?
我终于让它工作了,我不得不更新到 expo 0.55 React Native sdk,因为我认为他们在 .54 之后实现了自动增长输入。然后我不得不从使用反应本机元素输入切换到仅反应本机文本输入,因为 RNE 似乎没有实现自动增长。最后我不得不改变我的高度设置,如果你像我一样设置一个确定的高度 height: {35}
它不会增长,所以我不得不对输入和输入的视图使用 minheight
是为了让他们一起成长。