React Native安卓盒子应用实现遥控器选中高亮（类Hover）功能求助

你的问题核心在于：针对遥控器操作的电视端应用，不能用触摸场景的onPressIn/onPressOut来模拟选中状态——遥控器操作依赖**焦点（Focus）**事件，而非触摸按压事件。React Native的普通Touchable组件对电视端焦点支持有限，需要调整事件监听逻辑和组件选择。

解决方案步骤 #

1. 替换触摸组件，监听焦点事件：使用TouchableWithoutFeedback（或TV专用的Touchable组件），通过onFocus和onBlur事件捕获遥控器选中/取消选中的状态，这是电视端的正确触发时机。
2. 调整状态变量名：将hoveredItem改为focusedItem，更符合电视端焦点状态的语义。
3. 修复样式层级问题：你的LinearGradient覆盖在TouchableHighlight内部，导致Touchable的背景色无法显示，需将高亮样式直接应用到LinearGradient或调整样式层级。

修改后的完整代码 #

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  ImageBackground,
  ScrollView,
  TouchableWithoutFeedback
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { LinearGradient } from 'expo-linear-gradient';

const LandingPage = () => {
  const navigation = useNavigation();
  // 改为focusedItem，语义更准确
  const [focusedItem, setFocusedItem] = useState(null);

  const items = [
    { title: 'Channels', key: 'Channels' },
    { title: 'Movies', key: 'Movies' },
    { title: 'Messages', key: 'Messages' },
    { title: 'Map', key: 'Map' },
    { title: 'Weather', key: 'Weather' },
    { title: 'Language', key: 'Language' },
  ];

  // 焦点获取时设置当前选中项
  const handleItemFocus = (itemKey) => {
    setFocusedItem(itemKey);
  };

  // 焦点失去时清空选中状态
  const handleItemBlur = () => {
    setFocusedItem(null);
  };

  const handleItemPress = (itemKey) => {
    navigation.navigate(`${itemKey}Page`);
  };

  return (
    <View style={styles.container}>
      <LinearGradient
        start={{ x: 0, y: 0.9 }}
        end={{ x: 0, y: 1 }}
        colors={['#00050a', '#000000']}
        style={styles.gradient}
      >
        <ImageBackground source={require('../assets/cruzeiro.png')} style={styles.image}>
          <View style={styles.titleContainer}>
            <Text style={styles.title}>Amadouro</Text>
            <Text style={styles.title2}>103</Text>
          </View>
          <ScrollView
            style={styles.scrollView}
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.scrollViewContent}
            // 确保ScrollView不抢占焦点
            focusable={false}
          >
            {items.map((item) => (
              <TouchableWithoutFeedback
                key={item.key}
                // 允许组件获取遥控器焦点
                focusable={true}
                onPress={() => handleItemPress(item.key)}
                // 监听焦点事件
                onFocus={() => handleItemFocus(item.key)}
                onBlur={handleItemBlur}
              >
                <LinearGradient
                  colors={[
                    focusedItem === item.key ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0)',
                    focusedItem === item.key ? 'rgba(255, 255, 255, 0.8)' : 'rgba(255, 255, 255, 0.5)'
                  ]}
                  start={{ x: 0.6, y: 0.1 }}
                  end={{ x: 0.1, y: 0.9 }}
                  style={[styles.item, styles[item.key.toLowerCase()]]}
                >
                  <Text 
                    style={[
                      styles.itemText,
                      focusedItem === item.key && styles.focusedItemText
                    ]}
                  >
                    {item.title}
                  </Text>
                </LinearGradient>
              </TouchableWithoutFeedback>
            ))}
          </ScrollView>
        </ImageBackground>
      </LinearGradient>
    </View>
  );
};

// 补充样式示例
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradient: {
    flex: 1,
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'flex-end',
  },
  titleContainer: {
    position: 'absolute',
    top: 40,
    left: 20,
  },
  title: {
    color: 'white',
    fontSize: 32,
    fontWeight: 'bold',
  },
  title2: {
    color: 'rgba(255,255,255,0.7)',
    fontSize: 24,
  },
  scrollView: {
    marginBottom: 30,
  },
  scrollViewContent: {
    paddingHorizontal: 20,
    gap: 15,
  },
  item: {
    paddingHorizontal: 30,
    paddingVertical: 15,
    borderRadius: 8,
    minWidth: 120,
    alignItems: 'center',
  },
  itemText: {
    color: 'white',
    fontSize: 18,
    fontWeight: '500',
  },
  focusedItemText: {
    color: '#000',
    fontWeight: 'bold',
  },
  // 各个item的自定义样式（如果有的话）
  channels: {},
  movies: {},
  // ...其他item样式
});

export default LandingPage;

关键修改说明 #

• 事件监听：用onFocus/onBlur替代onPressIn/onPressOut，完美适配遥控器的焦点移动逻辑。
• 样式调整：直接修改LinearGradient的渐变色，同时给文本添加高亮样式，确保视觉反馈清晰。
• 焦点配置：给每个TouchableWithoutFeedback设置focusable={true}，确保遥控器能选中该组件；ScrollView设置focusable={false}，避免焦点被ScrollView本身占用。

额外优化建议 #

• 添加焦点动画：可以用Animated API给焦点状态添加缩放、透明度变化等动画，比如焦点获取时放大1.05倍，增强交互感。
• 自动滚动处理：如果ScrollView内容较多，可监听焦点位置，当焦点靠近边缘时自动滚动ScrollView，提升操作流畅度。
• 自定义焦点环：安卓电视默认会有系统焦点环，若需要自定义样式，可通过View包裹组件并设置outlineStyle等属性覆盖。

内容的提问来源于stack exchange，提问作者Marco Marques