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

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;

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

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