如何在TextInput中检测高度已达到50%

Question

是否可以检测Textinput组件的高度是否发生了变化，然后触发一些事情。例如：

useEffect(() => {
//if the line heigh has reached 50%
console.log('Input has reach 50%')
}, []);
<TextInput styles={{maxHeight: '50%'}} multiline={true} />

我不知道从哪里开始。。。请帮助

Answer 1

您可以使用@react native community/hooks中的useLayout挂钩。这允许您动态跟踪高度、宽度等。。组件的。

1. 首先安装npm install @react-native-community/hooks

2. 那就做下面这样的事情吧。

import { useLayout } from '@react-native-community/hooks'

export default function App() {
// Use the hook
const { onLayout, ...layout } = useLayout()

// Check for when the height changes
useEffect(()=>{
console.log(layout.height);
},[layout.height])

// Lastly place it in the component you wish to track
return (
<> 
<TextInput 
onLayout={onLayout} 
styles={{maxHeight: '50%'}} 
multiline={true} />
</>
)
}