堆栈导航器上的键盘或D Pad导航聚焦于先前的屏幕可触摸对象

Question

bounty到期在4天内。该问题的答案有资格获得+ 100声望赏金。Mohamed Ahmed希望对此问题引起更多关注：“我提供可靠且不错的答案，因为我不确定这是否是错误，甚至正式的回购协议也似乎忽略了该问题”

因此，我有一个带有主屏幕页面的堆栈导航器，该页面具有“菜单项”的映射数组。它们水平对齐。我的问题是，当我导航到任何页面（使用键盘或android上的dpad）并使用键盘在该屏幕上的元素上导航时，如果我按下键，它将集中在主屏幕菜单项上。但是这些项目在主屏幕中，这是另一个屏幕。我知道它是聚焦的，因为我将注意力集中在当前屏幕上的聚焦元素上，如果按回车键，它将在主菜单中打开它所聚焦的屏幕。

App.js：

<Stack.Navigator initialRouteName='Home' headerMode='none'>
                        <Stack.Screen name="Home" component={HomeScreen} />
                        <Stack.Screen name="TV" component={TVScreen} />
                        <Stack.Screen name="Movie" component={MovieScreen} />
                        <Stack.Screen name="Messages" component={MessageScreen} />
                        <Stack.Screen name="HotelInfo" component={HotelInformationScreen} />
                        <Stack.Screen name="Daily" component={DailyUpdateScreen} />
                        <Stack.Screen name="IVD" component={IVDScreen} />
                        <Stack.Screen name="Shopping" component={ShoppingScreen} />
                        <Stack.Screen name="Weather" component={WeatherScreen} />
                        <Stack.Screen name="Language" component={LanguageSelectionScreen} />
                        <Stack.Screen name="Survey" component={SurveyScreen} />
                        <Stack.Screen name="TVPlayer" component={TVPlayer} />
                        <Stack.Screen name="MoviePlayer" component={MoviePlayer} />
                        <Stack.Screen name="MovieDetail" component={MovieDetailScreen} />

                        <Stack.Screen name="Registration" component={Registration} />
</Stack.Navigator>

HomeScreen.js：

navigations = debounce((screen_name, background_image) => {
        this.props.navigation.push(screen_name, {background: background_image});
    }, 200)

    navigate(screen_name, background_image){
        this.navigations(screen_name, background_image);
    }

<View style={styles.thumbnailContainer}>
                    {
                        this.state.mainMenu.map((e, index) => {
                            return (
                                <CustomIcon
                                    key={index}
                                    source={{uri: baseURL.baseImageURL + '/main-menu/icon/' + e.icon}}
                                    imageStyle={styles.thumbnail}
                                    onPress={()=>this.navigate(e.screen_name, e.background_image)}
                                    textStyle={styles.iconLabel}
                                    // text={e.menu}
                                    selected={index === 0}
                                />
                            )
                        })
                    }
</View>

示例JSON：

{
  "menu": [
    {
      "id": 1,
      "main_menu_id": 1,
      "lang_id": 1,
      "menu": "Messages",
      "screen_name": "Messages",
      "icon": "7954be68-4abe-419b-9484-a8ce64e6d126.png",
      "background_image": "82fc75a4-17c5-4681-b63a-ec1aac95bfca.png",
      "menu_index": 3,
      "active": 1,
      "created_at": "2020-02-12 05:08:58",
      "updated_at": "2020-02-20 18:04:03",
      "deleted_at": null
    },
    {
      "id": 6,
      "main_menu_id": 2,
      "lang_id": 1,
      "menu": "Movies",
      "screen_name": "Movie",
      "icon": "c06b1b9d-b0e2-405e-94e2-762eac2d77f2.png",
      "background_image": "1153df7f-30c4-4c0e-94c4-4b069c9c6ece.png",
      "menu_index": 2,
      "active": 1,
      "created_at": "2020-02-12 17:39:05",
      "updated_at": "2020-02-20 18:03:46",
      "deleted_at": null
    },

  ]
}

因此，基本上，导航到主页（应用程序启动时），然后从那里导航到电视屏幕或任何其他屏幕，尽管该屏幕不可见，但我可以按下并播放主屏幕图标/菜单项。我已经尝试过This Solution，但该方法对我不起作用。我正在为Android TV开发一个应用程序，这就是为什么我必须使用键盘的原因。

Answer 1

此问题已通过合并解决。对于有问题的任何人，请进行更新。

这里是原始git问题：Git