在 React Native TVOS 中滚动时将项目居中

Question

我是 React Native 的新手，我正在创建一个演示，让项目垂直滚动。问题是当项目聚焦时我需要将其居中。假设 UI 上只有 3 个项目可见，当我在它们之间滚动时，焦点项目应该位于中心。目前，对于失焦的项目，我必须按方向键上的向下键两次。

import React, { useState, useRef, useCallback } from 'react';
import { FlatList, StyleSheet, Text, TouchableOpacity, View, Dimensions } from 'react-native';

const data = Array.from({ length: 20 }, (_, index) => index + 1);

const renderItem = ({ item }) => (
  <TouchableOpacity style={styles.item}>
    <Text style={styles.text}>{item}</Text>
  </TouchableOpacity>
);

export default function App() {

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => renderItem({ item })}
        keyExtractor={(item) => item.toString()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  item: {
    marginVertical: 8,
    height: 150,
    width: 100,
    backgroundColor: '#f9c2ff',
    justifyContent: 'center',
    borderRadius: 5,
  },
  selectedItem: {
    backgroundColor: '#ffb6c1',
  },
  text: {
    fontSize: 18,
    textAlign: 'center',
  },
});

我尝试设置偏移量，但没有成功。我尝试使用滚动视图，但也失败了。

Answer 1

我找到了这个问题的解决方案。

我们在使用 TVOS 时应该使用 TouchableOpacity。带有自动对焦标志的可触摸不透明度可以处理所有情况。

可触摸不透明度详细指南