Faites glisser pour ouvrir l'écran des contacts dans React Native

Question

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>

Answer 1

Pour Android, vous pouvez utiliser react-native 中的本机 Linking pour ouvrir l'application Contacts.

const openContacts = () => {
  if (Platform.OS === 'android') {
    Linking.openURL('content://com.android.contacts/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é.

import { useCallback } from 'react';
import { Linking, Platform } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

.
.
.

useFocusEffect(
  useCallback(() => {
    if (Platform.OS === 'android') {
      Linking.openURL('content://com.android.contacts/contacts');
    }
  }, [])
);

Ceci est pour la mise en œuvreSnacks