react-native - React Native Android TV - 使用遥控器导航时屏幕上的两个元素同时聚焦

Question

我正在为 Android TV 开发一个 React Native 应用程序。

我在屏幕顶部有一个按钮，然后在它下面有一个包含网格的容器。当我专注于网格容器中的顶部项目时，我希望能够向上导航到按钮，然后当我专注于按钮时，我希望能够向下导航回顶部的项目网格容器。

我遇到的问题是，Android TV 以与处理按钮相同的方式处理网格中的第一行。

因此，当按钮获得焦点时，网格中的顶部项目将获得焦点，反之亦然 - 两个元素同时获得焦点。向下导航后，网格中的第二行变得聚焦，这很好，但是当再次使用遥控器向上导航时，第一行和按钮都变得聚焦。

这是我的代码：

<View style={{ flex: 1, backgroundColor: theme?.color?.background }}>
            <View
                style={{
                    zIndex: 10,
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    height: theme.height,
                    paddingLeft: 30,
                }}
            >
                <Button
                    containerStyles={{
                        backgroundColor: theme?.color?.background,
                        marginTop: 6,
                    }}
                    title={name}
                />
            </View>
            <GridContainer
                data={data}
                onPressCell={onPressCell}
                hideTopBar
                autoRevealOutOfBounds={autoRevealOutOfBounds}
                selectedDate={selectedDate.date}
                is12HourClock={is12HourClock}
                activityIndicator={loadingIndicator()}
                onCellFocus={onCellFocus}
                ref={(ref) => {
                    gridRef.current = ref;
                }}
            />
        </View>

如何更改布局或代码，以便我可以从Button元素无缝导航GridContainer并一次独立地专注于它们？TIA。

标签： react-nativeandroid-tv