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 is not an object (evalating 'refs.current[0].focus')”

[EDIT] 在基于@drew-reese 很好的答案进行了小幅编辑后，参考工作正常，但焦点仍然没有。

[EDIT 2] 下面是这个问题的一个简单示例：https://snack.expo.dev/@jerrybels/calm-ramen

Answer 1

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

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

您可能会发现为每个正在渲染的子组件显式创建 ref 并将这些 as 传递给 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>
  )}
/>