React Native / Deep Linking

Deep Linking

Deep Linking гэдэг нь URL холбоос дарахад апп нээгдэж, тодорхой дэлгэцэд шууд очих технологи. Жишээлбэл, найз тань myapp://courses/react-native холбоос илгээхэд таны апп нээгдэж React Native курсийн дэлгэц гарна. Энэ нь хэрэглэгчдэд маш тохиромжтой туршлага өгдөг.

Expo Router ба deep linking

Expo Router ашиглаж байгаа бол deep linking автоматаар тохируулагдсан байдаг. app.json-д scheme нэмэхэд л хангалттай:

json
{
  "expo": {
    "name": "MyApp",
    "slug": "my-app",
    "scheme": "myapp"
  }
}

Ингэснээр myapp:// гэсэн scheme тань аппд бүртгэгдэнэ. myapp://courses холбоос дарахад app/courses.tsx дэлгэц нээгдэнэ — файлын бүтэцтэй яг таарч байгааг анзаарна уу.

React Navigation дээр deep linking тохируулах

Expo Router ашиглахгүй бол linking тохируулгыг NavigationContainer-д дамжуулна:

typescript
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Courses: 'courses',
      CourseDetail: 'courses/:slug',
      Profile: 'profile/:userId',
    },
  },
};

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Courses" component={CoursesScreen} />
        <Stack.Screen name="CourseDetail" component={CourseDetailScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

https://myapp.com/courses/react-native болон myapp://courses/react-native хоёулан CourseDetail дэлгэцийг нээж slug параметрт react-native дамжуулна.

URL параметр хэрхэн авах вэ?

Deep link-ээр дамжсан параметрийг route params-аас авна:

typescript
import { useRoute, RouteProp } from '@react-navigation/native';

type CourseDetailParams = {
  CourseDetail: {
    slug: string;
  };
};

export default function CourseDetailScreen() {
  const route = useRoute<RouteProp<CourseDetailParams, 'CourseDetail'>>();
  const { slug } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{slug} курс</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#0b1120',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#f1f5f9',
  },
});

Expo Go дотроос deep link-г хялбархан туршиж болно. Terminal дээр дараах командыг ажиллуулна:

bash
# iOS simulator дээр туршиж үзэх
npx uri-scheme open myapp://courses/react-native --ios

# Android emulator дээр туршиж үзэх
npx uri-scheme open myapp://courses/react-native --android

Эсвэл кодоор тодорхой URL руу шилжих:

typescript
import { Linking } from "react-native";

// Гадаад вэб хуудас нээх
await Linking.openURL("https://expo.dev");

// Өөрийн аппын дэлгэцэд очих
await Linking.openURL("myapp://profile/123");

// Deep link ирэхийг хянах
useEffect(() => {
  const subscription = Linking.addEventListener("url", ({ url }) => {
    console.log("Deep link ирлээ:", url);
  });
  return () => subscription.remove();
}, []);

Universal link (iOS) болон App Link (Android) ашигласнаар https:// холбоос дарахад вэб хуудсыг биш аппыг нээх боломж бий — энэ нь илүү мэргэжлийн арга боловч нэмэлт серверийн тохируулга шаардана.

Дараагийн хичээлд:

Animated API үндэс — React Native-н суурь animation хэрэгслийг ашиглан элементүүдийг хэрхэн хөдөлгөх, fade хийх, масштаблах талаар сурна. Animation нь аппыг амьд, тааламжтай болгодог чухал хэрэгсэл.

← Өмнөх хичээлSecure StorageДараах хичээл →Animated API үндэс