时间戳

首页 > 解决方案 > React Native - 关注列表中的第一个可触摸对象

reactjs - React Native - 关注列表中的第一个可触摸对象

问题描述

我试图在渲染后获得第TouchableOpacity一个焦点。FlatList我尝试使用 refs 并从中触发焦点，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')”

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

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

标签： reactjsreact-native

解决方案

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

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

您可能会发现为每个正在渲染的子组件显式创建 refs 并将它们作为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>
  )}
/>

推荐阅读