我需要定义按下按钮后获得焦点的下一个视图,但是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元素。
1条答案
按热度按时间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}>
希望能有所帮助!