如何在React Native中利用isFocused方法变更组件状态

你的代码里直接在渲染逻辑中调用ref.current?.isFocused()无法实现UI自动更新，因为组件只有在状态或props变化时才会触发重新渲染，聚焦状态的改变不会主动触发组件重渲染。下面是常规解决思路和修改后的代码：

核心思路 #

• 用useState维护一个聚焦状态变量，以此触发组件重新渲染
• 借助GooglePlacesAutocomplete封装的onFocus和onBlur回调（该组件基于TextInput实现，原生支持这两个回调）更新状态变量
• 根据状态变量的值切换UI显示内容

修改后的代码 #

import React, { useEffect, useRef, useState } from 'react'
import { Animated, Text, View } from 'react-native'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'
import { GOOGLE_PLACES_API_KEY } from '@env'

export default function SearchComponent({ expanded = false, setExpanded }) {

    const ref = useRef();
    const [top] = useState(new Animated.Value(0))
    // 新增状态变量跟踪输入框聚焦状态
    const [isInputFocused, setIsInputFocused] = useState(false)

    useEffect(() => {
        Animated.timing(top, {
            toValue: !expanded ? 70 : 80,
            duration: 150,
            useNativeDriver: false
        }).start();
    }, [expanded, top]);

    return (
        <Animated.View style={{ top }}>
            <GooglePlacesAutocomplete
                ref={ref}
                placeholder='Search'
                onPress={(data, details = null) => {
                    console.log(data, details);
                }}
                // 通过聚焦/失焦回调更新状态
                onFocus={() => setIsInputFocused(true)}
                onBlur={() => setIsInputFocused(false)}
                query={{
                    key: GOOGLE_PLACES_API_KEY,
                    language: 'en',
                    components: 'country:ca'
                }}
            />
            {/* 根据状态变量切换显示文本 */}
            {isInputFocused ? <Text>Hello</Text> : <Text>Hi</Text>}
        </Animated.View>
    )
}

补充说明 #

如果遇到组件未暴露onFocus/onBlur的特殊场景，也可以通过ref结合定时器或事件监听来检测状态变化，但这种方式效率低于直接使用组件回调，优先推荐前者。

内容的提问来源于stack exchange，提问作者noor.soreti