React Native -关注列表中的第一个可触点

Question

我试图让FlatList中的第一个TouchableOpacity在渲染后获得焦点。我试图使用参考和触发焦点从useEffect，但我不能弄清楚它。

代码如下:

import React, {useRef, useEffect} from "react";
import {FlatList, Text, TouchableOpacity, View} from "react-native";
const MyScreen = () => {
const refs = useRef([]);
useEffect (() => {
refs.current[0].focus()
}, []);
const setFocusedElement = (element) => {
console.log(element);
}
return (
<View>
<FlatList
data={[1, 2, 3]}
keyExtractor={(item) => item}
renderItem={({ item, index }) => {
return (
<TouchableOpacity ref={el => refs.current[index] = el} onFocus={() => setFocusedElement(item)}>
<View><Text>{item}</Text></View>
</TouchableOpacity>
);
}}
/>
</View>
);
}
export default MyScreen;

我得到这样一个错误:"TypeError: undefined不是一个对象(评估'ref .current[0].focus')">

[EDIT]在基于@drew-reese的一个小编辑之后，很棒的答案，裁判正在工作，但焦点仍然没有。

[编辑2]这是一个零食的例子:https://snack.expo.dev/@jerrybels/calm-ramen

Answer 1

refs本身是一个React ref，但您似乎没有通过索引正确设置子ref。你仍然应该引用refs.current来更新ref值。

ref={el => refs.current[index] = el}

你可能会发现你有更好的运气显式地为每个被渲染的子组件创建ref，并将这些作为传递给ref，而不是使用回调语法。

const refs = useRef([]);
refs.current = data.map((_, i) => refs.current[i] ?? createRef());
useEffect (() => {
refs.current[0].current.focus();
}, []);
...
<FlatList
data={data}
keyExtractor={(item) => item}
renderItem={({ item, index }) => (
<TouchableOpacity ref={refs.current[index]}>
<View><Text>{item}</Text></View>
</TouchableOpacity>
)}
/>