如何映射此数组中的所有名称

Question

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;

请问我如何在反应本机平面列表中映射此数组中的所有“名称”。我只是想显示部分下的“名称”。请我真的需要帮助！我是 React Native 的新手。

Answer 1

这是呈现 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,
  },
});

输出：

Answer 2

下面是列表在我的模拟器中的一个简短屏幕 demo

如何映射此数组中的所有名称

Haw to map through all the names in this array

javascript

arrays

reactjs

react-native

react-native-flatlist