React Native / Navigation параметр дамжуулах

Navigation параметр дамжуулах

Дэлгэцүүд хооронд өгөгдөл дамжуулах нь navigation-н нэн чухал хэсэг. Курсын жагсаалтаас нэгийг нь дарахад тухайн курсын мэдээлэл дэлгэрэнгүй хуудасруу очих хэрэгтэй — энд параметр дамжуулах ажиллагаа хэрэг болдог. Stack Navigator-д параметр дамжуулах бүх арга замыг энэ хичээлд судална.

navigation.navigate() -н хоёр дахь аргументт объект дамжуулж параметр илгээнэ:

jsx
// Жагсаалтын дэлгэц — CourseListScreen.jsx
import {
  FlatList,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from "react-native";

const COURSES = [
  {
    slug: "javascript",
    title: "JavaScript үндэс",
    color: "#4ade80",
    lessons: 50,
  },
  { slug: "react", title: "React үндэс", color: "#60a5fa", lessons: 45 },
  {
    slug: "react-native",
    title: "React Native",
    color: "#22d3ee",
    lessons: 50,
  },
];

export default function CourseListScreen({ navigation }) {
  return (
    <FlatList
      data={COURSES}
      keyExtractor={(item) => item.slug}
      contentContainerStyle={styles.list}
      renderItem={({ item }) => (
        <TouchableOpacity
          style={styles.card}
          onPress={() =>
            navigation.navigate("CourseDetail", {
              slug: item.slug,
              title: item.title,
              color: item.color,
              lessons: item.lessons,
            })
          }
        >
          <View style={[styles.dot, { backgroundColor: item.color }]} />
          <View style={styles.info}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.meta}>{item.lessons} хичээл</Text>
          </View>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>
      )}
    />
  );
}

const styles = StyleSheet.create({
  list: { padding: 16, gap: 10, backgroundColor: "#0b1120", flexGrow: 1 },
  card: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#0f172a",
    padding: 16,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#1e293b",
    gap: 12,
  },
  dot: { width: 12, height: 12, borderRadius: 6 },
  info: { flex: 1 },
  title: { fontSize: 15, color: "#f1f5f9", fontWeight: "500" },
  meta: { fontSize: 13, color: "#475569", marginTop: 2 },
  arrow: { fontSize: 20, color: "#475569" },
});

route.params-аар параметр хүлээн авах

Дамжуулсан параметрүүдийг хүлээн авах дэлгэцэд route.params -аар хандана:

jsx
// Дэлгэрэнгүй дэлгэц — CourseDetailScreen.jsx
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";

export default function CourseDetailScreen({ route, navigation }) {
  // route.params-аас бүх параметрийг задалж авна
  const { slug, title, color, lessons } = route.params;

  return (
    <View style={styles.container}>
      <View style={[styles.badge, { borderColor: color }]}>
        <Text style={[styles.badgeText, { color }]}>{slug}</Text>
      </View>

      <Text style={styles.title}>{title}</Text>

      <View style={styles.stat}>
        <Text style={styles.statNumber}>{lessons}</Text>
        <Text style={styles.statLabel}>хичээл</Text>
      </View>

      <TouchableOpacity
        style={styles.startBtn}
        onPress={() =>
          navigation.navigate("Lesson", {
            courseSlug: slug,
            lessonSlug: "01-intro",
          })
        }
      >
        <Text style={styles.startBtnText}>Эхлэх</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 24, backgroundColor: "#0b1120" },
  badge: {
    alignSelf: "flex-start",
    borderWidth: 1,
    borderRadius: 6,
    paddingHorizontal: 10,
    paddingVertical: 4,
    marginBottom: 16,
  },
  badgeText: { fontSize: 13, fontWeight: "600" },
  title: {
    fontSize: 26,
    fontWeight: "bold",
    color: "#f1f5f9",
    marginBottom: 20,
  },
  stat: {
    flexDirection: "row",
    alignItems: "baseline",
    gap: 6,
    marginBottom: 32,
  },
  statNumber: { fontSize: 36, fontWeight: "bold", color: "#22d3ee" },
  statLabel: { fontSize: 16, color: "#94a3b8" },
  startBtn: {
    backgroundColor: "#22d3ee",
    padding: 14,
    borderRadius: 10,
    alignItems: "center",
  },
  startBtnText: { color: "#0b1120", fontWeight: "bold", fontSize: 16 },
});

Буцах дэлгэцт параметр дамжуулах

Заримдаа хүүхэд дэлгэцээс эцэг дэлгэцт өгөгдөл буцааж дамжуулах хэрэгтэй болдог. Жишээлбэл маягт дүүргэж "Хадгалах" дарахад. Үүнд navigation.navigate() ба route.params хоёуланг нь ашиглана:

jsx
// Маягтны дэлгэц — EditProfileScreen.jsx
export default function EditProfileScreen({ navigation, route }) {
  const [name, setName] = useState(route.params?.currentName ?? '');

  const handleSave = () => {
    // Эцэг дэлгэцт шинэчилсэн мэдээлэл буцааж дамжуулна
    navigation.navigate('Profile', { updatedName: name });
  };
  // ...
}

// Профайл дэлгэц — ProfileScreen.jsx
export default function ProfileScreen({ route, navigation }) {
  // Маягтаас буцаж ирэх үед params шинэчлэгдсэн байна
  const displayName = route.params?.updatedName ?? 'Болд Баатар';
  // ...
}

setParams — одоогийн дэлгэцийн параметр шинэчлэх

Дэлгэцийн параметрийг гадны дэлгэцэд шилжихгүйгээр шинэчлэхэд navigation.setParams() ашиглана:

jsx
// Liked тоог params-д шинэчлэх
const [liked, setLiked] = useState(false);

const handleLike = () => {
  setLiked((prev) => !prev);
  navigation.setParams({ liked: !liked });
};

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

Navigation параметр дамжуулах бүх аргыг сурлаа. Дараагийн хичээлд useState React Native-д — state удирдлагыг гүнзгийрүүлэн судална. Counter, toggle, маягт гэх мэт жишээнүүдээр дамжуулан hooks-г нэгтгэнэ.

← Өмнөх хичээлNested NavigationДараах хичээл →useState React Native-д