इस सरणी में सभी नामों के माध्यम से मानचित्र कैसे करें

यहां बताया गया है कि आप Law कुंजी की सामग्री के साथ-साथ part सरणी से संबंधित नामों को कैसे प्रस्तुत कर सकते हैं।

मैंने List और ListItem घटक को छोड़ दिया है।

कोड:

const NigLawList = ({ navigation }) => {
  const [people, setPeople] = useState([
    {
      Law: "Evidence Act",
      id: "1",
      part: [
        { name: "Introduction cc", meaning: "how are you don" },
        { name: "Introduction bb", meaning: "how are you don" },
      ],
    },
  ]);

  return (
    <SafeAreaView style={{ marginTop: 20 }}>
      <FlatList
        numColumns={1}
        keyExtractor={(item) => item.id}
        data={people}
        renderItem={({ item }) => (
          <View>
            <Text
              style={{
                fontSize: 20,
              }}
            >
              {item.Law}
            </Text>
            {item.part.map((name) => (
              <Text>{name.name}</Text>
            ))}
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
};

export default NigLawList;

अधिक जानकारी के लिए दस्तावेज़ भी पढ़ें: FlatList

आउटपुट:

पैरामीटर के साथ अगली स्क्रीन पर नेविगेट करने के लिए कोड:

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
} from "react-native";
import { NavigationContainer, StackActions } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import { SafeAreaView } from "react-native-safe-area-context";

const Stack = createStackNavigator();

const NigLawList = ({ navigation }) => {
  const [people, setPeople] = useState([
    {
      Law: "Evidence Act",
      id: "1",
      part: [
        { name: "Introduction cc", meaning: "how are you don" },
        { name: "Introduction bb", meaning: "how are you don" },
      ],
    },
  ]);

  return (
    <SafeAreaView style={{ marginTop: 20 }}>
      <FlatList
        numColumns={1}
        keyExtractor={(item) => item.id}
        data={people}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => navigation.navigate("Names", { parts: item.part })}
          >
            <View>
              <Text
                style={{
                  fontSize: 20,
                }}
              >
                {item.Law}
              </Text>
              {/* {item.part.map((name) => (
                <Text>{name.name}</Text>
              ))} */}
            </View>
          </TouchableOpacity>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
};

const NamesScreen = ({ navigation, route }) => {
  const { parts } = route.params;
  return (
    <SafeAreaView>
      {parts.map((part) => (
        <TouchableOpacity
          key={part.name}
          onPress={() =>
            navigation.navigate("Meaning", { meaning: part.meaning })
          }
        >
          <Text
            style={{
              fontSize: 20,
            }}
          >
            {part.name}
          </Text>
        </TouchableOpacity>
      ))}
    </SafeAreaView>
  );
};

const MeaningScreen = ({ route }) => {
  const { meaning } = route.params;
  return (
    <SafeAreaView>
      <Text
        style={{
          fontSize: 20,
          marginTop: 20,
        }}
      >
        {meaning}
      </Text>
    </SafeAreaView>
  );
};

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="NigLawList" component={NigLawList} />
          <Stack.Screen name="Names" component={NamesScreen} />
          <Stack.Screen name="Meaning" component={MeaningScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

आउटपुट: