在输入文本后,TextInput
我想知道TextInput
. 或者 当前的数量strings
也是可能的。
我试过string.split('\n').length
了,但是这段代码没有检测到当文本大于屏幕时该行自动递增。
我如何获得行数
当我使用该功能在Swift
实现中制作此功能时string.enumerateLines
。
你有类似的功能吗?
在输入文本后,TextInput
我想知道TextInput
. 或者 当前的数量strings
也是可能的。
我试过string.split('\n').length
了,但是这段代码没有检测到当文本大于屏幕时该行自动递增。
我如何获得行数
当我使用该功能在Swift
实现中制作此功能时string.enumerateLines
。
你有类似的功能吗?
据我所知,没有官方方法可以获取当前使用的行数,但我有一个解决方法:
我们利用我们的onLayout
方法,TextInput
并跟踪当前使用的高度。我们需要两个状态变量:
this.state = {
height: 0, // here we track the currently used height
usedLines: 0,// here we calculate the currently used lines
}
布局:
_onLayout(e) {
console.log('e', e.nativeEvent.layout.height);
// the height increased therefore we also increase the usedLine counter
if (this.state.height < e.nativeEvent.layout.height) {
this.setState({usedLines: this.state.usedLines+1});
}
// the height decreased, we subtract a line from the line counter
if (this.state.height > e.nativeEvent.layout.height){
this.setState({usedLines: this.state.usedLines-1});
}
// update height if necessary
if (this.state.height != e.nativeEvent.layout.height){
this.setState({height: e.nativeEvent.layout.height});
}
}
渲染方法
render() {
console.log('usedLines', this.state.usedLines);
return (
<View style={styles.container}>
<TextInput multiline style={{backgroundColor: 'green'}} onLayout={(e)=> this._onLayout(e)} />
</View>
);
}
工作示例:
如果用户出现以下情况,其他解决方案可能会失败:
解决此问题的一种方法是将 a 设置lineHeight
为<TextInput>
并使用该onContentSizeChange
道具:
<TextInput
style={{
lineHeight: 20,
}}
onContentSizeChange={e =>
console.log(e.nativeEvent.contentSize.height / 20) // prints number of lines
}
/>
对于 react-native 版本 >= 0.46.1
您可以使用 onContentSizeChange 获得更准确的线路跟踪,例如使用如下反应挂钩:
/**
* used to tracker content height and current lines
*/
const [contentHeightTracker, setContentHeightTracker] = useState<{
height: number,
usedLines: number;
}>({
height: 0,
usedLines: 0
});
useEffect(() => {
// console.log('used line change : ' + lineAndHeightTracker.usedLines);
// console.log('props.extremeLines : ' + props.extremeLines);
if (contentHeightTracker.usedLines === props.extremeLines) {
if (extremeHeight.current === undefined) {
extremeHeight.current = contentHeightTracker.height;
}
}
//callback height change
if (contentHeightTracker.height !== 0) {
props.heightChange && props.heightChange(contentHeightTracker.height,
contentHeightTracker.usedLines >= props.extremeLines,
extremeHeight.current);
}
}, [contentHeightTracker]);
const _onContentHeightChange = (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
// console.log('event height : ', event.nativeEvent.contentSize.height);
// console.log('tracker height : ', lineAndHeightTracker.height);
// the height increased therefore we also increase the usedLine counter
if (contentHeightTracker.height < event.nativeEvent.contentSize.height) {
setContentHeightTracker({
height: event.nativeEvent.contentSize.height,
usedLines: contentHeightTracker.usedLines + 1
});
} else {
// the height decreased, we subtract a line from the line counter
if (contentHeightTracker.height > event.nativeEvent.contentSize.height) {
setContentHeightTracker({
height: event.nativeEvent.contentSize.height,
usedLines: contentHeightTracker.usedLines - 1
});
}
}
};
render() {
console.log('usedLines', this.state.usedLines);
return (
<View style={styles.container}>
<TextInput
multiline
style={{backgroundColor: 'green'}}
onContentSizeChange={_onContentHeightChange}
/>
</View>
);
}