如何解决onFocus 功能在 TV App React Native FlatList 中不起作用
我正在使用 React Native 构建一个 android 电视应用程序。 我有一个填充了 TouchableHighlights 的 Flatlist,我需要关注第一个元素,但没有调用 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>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。