在 React Native 中滑動以開啟聯絡人螢幕

Question

我正在使用底部導航，當我透過滑動從撥號器螢幕導航到聯絡人螢幕時，當時我想直接打開手機的聯絡人螢幕。 下面我分享了ContactComponent檔案和BottomNavigation檔案的程式碼。 我是 React Native 的新手，所以請幫幫我。 提前致謝。

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

這是用於實施的小吃