如何在React Native中使用nextFocusDown

g6ll5ycj  于 2023-02-05  发布在  React
关注(0)|答案(1)|浏览(175)

我需要定义按下按钮后获得焦点的下一个视图,但是React Native文档(https://reactnative.dev/docs/view#nextfocusdown)中没有太多信息。
到目前为止,我有这样的东西:

const ListHeader = React.memo(({
    navigation
}) => {
    return (
        <>
            <View 
                style={{
                  width: '100%',
                  backgroundColor: '#338cf7',
                  height: 70,
                  flex: 1,
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center'
                }}
                focusable={false}
             >
                <View 
                      style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}
                      focusable={false}>
                    <TouchableNativeFeedback
                        background={VeoHoverBackground}
                        onPress={() => navigation.navigate('Sidebar')}
                    >
                        <View nextFocusDown={next_to_focus_id}>
                            <CustomIcon  
                                        style={{ padding: 10, color: 'white' }} size={22} 
                                        name='customize' />
                        </View>
                    </TouchableNativeFeedback>

                    <TouchableNativeFeedback
                        background={VeoHoverBackground}>
                        <View focusable={false}>
                            <Text style={{ color: 'white', marginLeft: 10, fontSize: 18 }}
                                  focusable={false}>VEO Messanger</Text>
                        </View>
                    </TouchableNativeFeedback>
                </View>
                <TouchableNativeFeedback 
                                         onPress={() => navigation.navigate('NewMessageView')}
                                         background={VeoHoverBackground}>
                    <View>
                        <CustomIcon 
                                    style={{ padding: 10, color: 'white' }} size={22} 
                                    name='edit-rounded' />
                    </View>
                </TouchableNativeFeedback>
            </View>
        </>
    );
});

如何获得下一个要聚焦的元素的id?在我的例子中,它必须是第二个TouchableNativeFeedback元素。

1qczuiv0

1qczuiv01#

所以我使用React Native,所以我不完全确定React是否以同样的方式工作,但是你必须传递一个ref给nextFocusDown属性。我看到你有id <View nextFocusDown={next_to_focus_id}>,但是我没有看到next_to_focus_id ref在哪里。
例如,在React Native中,我会使用useRef创建一个ref,并在TextInput或TouchableOpacity上使用ref属性。这里我将使用一个非常简单的TextInput示例:

const emailRef = useRef();
const passwordRef=useRef();

<TextInput
ref={emailRef}
nextFocusDown={passwordRef}>

<TextInput
ref={passwordRef}>

希望能有所帮助!

相关问题