堆栈导航器上的键盘或方向键导航 专注于上一个屏幕 Touchables
Keyboard or D Pad navigation on stack navigator Focusing on previous screen Touchables
所以我有一个带有主屏幕页面的堆栈导航器,该页面具有 "Menu Items" 的映射数组。它们水平对齐。我的问题是,当我导航到任何页面(在 android 上使用键盘或方向键)并使用我的键盘在该屏幕的元素上导航时,如果我按下键,它会聚焦在主屏幕菜单项上.但这些项目在主屏幕中,这是另一个屏幕。我知道它是聚焦的,因为我松开了对当前屏幕聚焦元素的关注,如果我按 return,它会在主菜单中打开它聚焦的屏幕。
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
},
]
}
所以基本上,导航到主页(当应用程序启动时),如果我导航到电视屏幕或任何其他屏幕,我可以按下并播放主屏幕 icons/menu 个项目,尽管屏幕不可见。
我已经尝试过 This Solution,但对我不起作用。
我正在为 android TV 开发应用程序,这就是我必须使用键盘的原因。
问题已通过合并解决。对于遇到问题的任何人,请进行更新。
这是原始的 git 问题:Git
所以我有一个带有主屏幕页面的堆栈导航器,该页面具有 "Menu Items" 的映射数组。它们水平对齐。我的问题是,当我导航到任何页面(在 android 上使用键盘或方向键)并使用我的键盘在该屏幕的元素上导航时,如果我按下键,它会聚焦在主屏幕菜单项上.但这些项目在主屏幕中,这是另一个屏幕。我知道它是聚焦的,因为我松开了对当前屏幕聚焦元素的关注,如果我按 return,它会在主菜单中打开它聚焦的屏幕。
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
},
]
}
所以基本上,导航到主页(当应用程序启动时),如果我导航到电视屏幕或任何其他屏幕,我可以按下并播放主屏幕 icons/menu 个项目,尽管屏幕不可见。 我已经尝试过 This Solution,但对我不起作用。 我正在为 android TV 开发应用程序,这就是我必须使用键盘的原因。
问题已通过合并解决。对于遇到问题的任何人,请进行更新。
这是原始的 git 问题:Git