Wischen Sie, um den Kontaktbildschirm in React Native zu öffnen

Question

Ich verwende die untere Navigation und wenn ich durch Wischen vom Wählbildschirm zum Kontaktbildschirm navigiere, möchte ich zu diesem Zeitpunkt direkt den Kontaktbildschirm meines Telefons öffnen. Unten habe ich den Code der ContactComponent-Datei und der BottomNavigation-Datei geteilt. Ich bin neu bei React Native, also helfen Sie mir bitte. Dank im Voraus.

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

对于 Android，您可以使用 react-native 中的本机 Linking 打开联系人应用程序。

const openContacts = () => {
  if (Platform.OS === 'android') {
    Linking.openURL('content://com.android.contacts/contacts');
  }
};

现在，如果您想在拨号器屏幕聚焦时打开联系人屏幕，您可以使用 @react-navigation/native 中的 useFocusEffect 挂钩来执行该操作。

在您想要导航到联系人应用程序的屏幕中，使用此挂钩，如图所示。

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');
    }
  }, [])
);

这是用于实施的小吃