0

我正在构建一个带有 react native 的 android 电视应用程序。我有一个填充了 TouchableHighlights 的平面列表，我需要第一个元素被聚焦，但没有调用 onfocus 函数。

我不确定它是否与 useCallback 挂钩或是否与 FlatList 或 TouchableHighlight 直接相关。

感谢你的帮助。问候。

    export default function PokeGrid ({hasTVPreferredFocus}) {
const [pokeData, setPokeData] = useState([]);
const [focus, setFocus] = useState(false);

const onFocus = useCallback(() => {
 console.log('llamo el onFocus');
 setFocus(true);
}, []);

const onBlur = useCallback(() => {
 setFocus(false);
}, []);

const PokeApiRequest = async () => {
  try {
    const res = await axios.get("https://pokeapi.co/api/v2/pokemon?limit=50")
    if(res) {
      console.log();
        setPokeData(res.data.results)
    }
  } catch (error) {
    console.log("Chingó a su madre: ", error);
 }

}

useEffect (() => {
    PokeApiRequest()
    return () => {
    }
  }, [])

这是我的 renderItem 函数：

    renderItem = ({item, index}) => {
    let url = item.url;
    const idPokemon = url.split("https://pokeapi.co/api/v2/pokemon");
    const link = urlImage + idPokemon[1].substring(0, idPokemon[1].length-1) + ".png";
    return  <TouchableHighlight 
            onFocus={onFocus}
            onBlur={onBlur}
            style={[styles.item, focus ? styles.itemFocused : null]}
            hasTVPreferredFocus={true}
        >
            <View>
                <Image
                style= {styles.image}
                resizeMode= "contain"
                source= {{uri: link}}
                />
                <Text>{item.name}</Text>
            </View>
        </TouchableHighlight>
}
4

0 回答 0