Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
165 views
in Technique[技术] by (71.8m points)

How to use nextFocusDown in React Native

I need to define the next view that gets focus once the button is pressed, however, there is no much information in React Native documentation (https://reactnative.dev/docs/view#nextfocusdown).

So far I have something like this:

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>
        </>
    );
}); 

How to get the id of the element that has to be focused next? In my case it has to be second TouchableNativeFeedback element.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...