React native 如何获取TextInput字符串中的当前行数?
在TextInput中输入文本后 我想知道TextInput中当前的行数。 或 当前的字符串数也是可能的 我尝试了string.split'\n'.length,但这段代码没有检测到当文本大于屏幕时该行会自动递增 如何获取行数 当我在Swift中创建此功能时 使用string.enumerateLines函数实现React native 如何获取TextInput字符串中的当前行数?,react-native,react-native-textinput,React Native,React Native Textinput,在TextInput中输入文本后 我想知道TextInput中当前的行数。 或 当前的字符串数也是可能的 我尝试了string.split'\n'.length,但这段代码没有检测到当文本大于屏幕时该行会自动递增 如何获取行数 当我在Swift中创建此功能时 使用string.enumerateLines函数实现 您有类似的功能吗?据我所知,目前没有官方方法获取当前使用的行数,但我为您提供了一个解决方法: 我们使用文本输入的onLayout方法,并跟踪当前使用的高度。我们需要两个状态变量: th
您有类似的功能吗?据我所知,目前没有官方方法获取当前使用的行数,但我为您提供了一个解决方法: 我们使用文本输入的onLayout方法,并跟踪当前使用的高度。我们需要两个状态变量:
this.state = {
height: 0, // here we track the currently used height
usedLines: 0,// here we calculate the currently used lines
}
网上付款:
渲染方法
工作示例:
对于react本机版本>=0.46.1 您可以使用onContentSizeChange获得更精确的线轨迹,例如,使用react挂钩,如下所示:
/**
* used to tracker content height and current lines
*/
const [contentHeightTracker, setContentHeightTracker] = useState<{
height: number,
usedLines: number;
}>({
height: 0,
usedLines: 0
});
render() {
console.log('usedLines', this.state.usedLines);
return (
<View style={styles.container}>
<TextInput multiline style={{backgroundColor: 'green'}} onLayout={(e)=> this._onLayout(e)} />
</View>
);
}
/**
* 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>
);
}