J'utilise la navigation inférieure et lorsque je navigue de l'écran du numéroteur à l'écran des contacts en faisant glisser, je souhaite alors ouvrir directement l'écran des contacts de mon téléphone. Ci-dessous, j'ai partagé le code du fichier ContactComponent et du fichier BottomNavigation. Je suis nouveau sur React Native, alors aidez-moi s'il vous plaît. Merci d'avance.
ContactComponent.js
const ContactComponents = ({ navigation }) => { useEffect(() => { Linking.openURL("content://com.android.contacts/contacts") }, []); } export default ContactComponents
BottomNavigation.js
const Tab = createMaterialTopTabNavigator(); export default function BottomNavigation() { return ( <Tab.Navigator tabBarPosition='bottom' initialRouteName='Dialer' screenOptions={{ tabBarLabelPosition: "beside-icon", //tabBarLabelStyle: { fontWeight: "700", fontSize: 15, color : 'white'}, tabBarIconStyle: { display: "none" }, tabBarStyle :{backgroundColor : bottomTabBarColor}, tabBarIndicatorStyle : {position : 'relative', borderWidth : 2 , borderColor : bottomTabBarIndicatorColor} }}> <Tab.Screen name="Messages" component={MessageComponent} options = {{ tabBarLabel: ({focused, color, size}) => ( <Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Messages </Text> ), }} /> <Tab.Screen name="Last Ones" component={LastOnesComponent} options = {{ tabBarLabel: ({focused, color, size}) => ( <Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Last Ones </Text> ), }} /> <Tab.Screen name="Dialer" component={Dialpad} options = {{ tabBarLabel: ({focused, color, size}) => ( <Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Dialer </Text> ), }} /> <Tab.Screen name="Contacts" component={ContactComponents} options = {{ tabBarLabel: ({focused, color, size}) => ( //<View style={focused ? styles.topTabLine : null}> <Text style={ [styles.textStyle, {color: focused ? focusedLabelColor : unfocusedLableColor , fontWeight : focused ? 'bold' : 'normal' }] }>Contacts </Text> //</View> ), }} /> </Tab.Navigator>
Pour Android, vous pouvez utiliser
react-native
中的本机Linking
pour ouvrir l'application Contacts.Maintenant, si vous souhaitez ouvrir l'écran des contacts lorsque l'écran du numéroteur est focalisé, vous pouvez utiliser le crochet
@react-navigation/native
中的useFocusEffect
pour le faire.Dans l'écran sur lequel vous souhaitez accéder à l'application Contacts, utilisez ce crochet comme indiqué.
Ceci est pour la mise en œuvreSnacks