import React, { useState } from 'react';
import {View, StyleSheet, Button, FlatList, SectionList} from 'react-native';
import { Item, Input,  Container, Header, List, ListItem, Text, Left, Right, Icon } from "native-base";

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

])
  
    return (
      <FlatList
      numColumns={1}
      keyExtractor={(item) => item.id} 
      data={people} 
      renderItem={({ item }) => (
      <List >

          <ListItem onPress={() => navigation.navigate('NigLawParts', item)}>
           
              <Text  style={{
            fontSize: 20,
            }}>{item.Law}</Text>
             
          </ListItem>

          </List>
      )}





      keyExtractor={(item, index) => index.toString()}
    />

    );
  }
  
  export default NigLawList;

कृपया मैं इस सरणी में सभी "नामों" के माध्यम से एक प्रतिक्रिया देशी फ्लैटलिस्ट में कैसे मैप कर सकता हूं। मैं बस "नाम" प्रदर्शित करना चाहता हूं जो कि भाग में है। कृपया मुझे वास्तव में इसके साथ मदद की ज़रूरत है! मैं देशी प्रतिक्रिया करने के लिए नया हूँ।

0
Samuel Edeh 3 नवम्बर 2020, 12:46

2 जवाब

सबसे बढ़िया उत्तर

यहां बताया गया है कि आप 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

आउटपुट:

enter image description here

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


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

आउटपुट:

enter image description here

0
Ketan Ramteke 3 नवम्बर 2020, 19:25

मेरे एमुलेटर में सूची कैसी है, इसकी एक छोटी स्क्रीन नीचे दी गई है डेमो

0
Samuel Edeh 3 नवम्बर 2020, 18:50