Javascript Haw映射此数组中的所有名称

import React，{useState}来自“React”；
从“react native”导入{View，StyleSheet，Button，FlatList，SectionList}；
从“本机库”导入{Item，Input，Container，Header，List，ListItem，Text，Left，Right，Icon}；
const NigLawList=（{navigation}）=>{
const[people，setPeople]=useState([
{法律：“证据法”，编号：“1”，
部分：[{名称：“引言1”，意思是：“你好吗”}，
{名称：“引言2”，意思是：“你好吗”}
]},
])
返回(
项目id}
数据={people}
renderItem={（{item}）=>(
navigation.navigate（'NigLawParts'，item）}>
{项目.法律}
)}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
}
导出默认列表以下是如何呈现
法则
键的内容以及
部分
数组中相应的名称

我省略了
列表
和
列表项
组件

代码：


const NigLawList=（{navigation}）=>{
const[people，setPeople]=useState([
{
法律：“证据法”，
id:“1”，
第部分：[
{name:“引言cc”，意思是：“你好吗？”，
{名称：“简介bb”，意思是：“你好吗，
],
},
]);
返回(
项目id}
数据={people}
renderItem={（{item}）=>(
{项目.法律}
{item.part.map（（名称）=>(
{name.name}
))}
)}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
};
导出默认列表；

也请阅读文档以了解更多信息：

输出：


使用参数导航到下一屏幕的代码：


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



从“React”导入React，{useState}；
进口{
样式表，
文本，
看法
平面列表，
可触摸不透明度，
}从“反应本族语”；
从“@react navigation/native”导入{NavigationContainer，StackActions}”；
从“@react navigation/stack”导入{createStackNavigator}；
从“反应本机安全区域上下文”导入{SafeAreaView}；
const Stack=createStackNavigator（）；
const NigLawList=（{navigation}）=>{
const[people，setPeople]=useState([
{
法律：“证据法”，
id:“1”，
第部分：[
{name:“引言cc”，意思是：“你好吗？”，
{名称：“简介bb”，意思是：“你好吗，
],
},
]);
返回(
项目id}
数据={people}
renderItem={（{item}）=>(
导航（“名称”{parts:item.part}）}
>
{项目.法律}
{/*{item.part.map（（名称）=>(
{name.name}
))} */}
)}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
};
常量名称屏幕=（{导航，路由}）=>{
const{parts}=route.params；
返回(
{parts.map（（part）=>(
navigation.navigate（“含义”，{含义：part.meansion}）
}
>
{part.name}
))}
);
};
常量含义屏幕=（{route}）=>{
const{meansion}=route.params；
返回(
{意义}
);
};
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
});

输出：

下面是列表在我的emulator中的显示方式的短屏幕
请考虑格式化您的源代码并改正您的问题中的键位。您想在哪里显示姓名？在同一列表项中，还是应该是单独的列表？你的要求不清楚。非常感谢你的答复。我想在同一个列表中显示它。请原谅我。。我是新来的土生土长的。你好，肯坦！你能帮帮我吗。如何在新屏幕中传递“名称”并在该屏幕的另一个平面列表中显示。我可以将名称传递到另一个屏幕，但我可以在新列表中显示它们。现在我不在笔记本电脑旁，因此无法发送工作代码，我回家后会将其发布。同时仔细阅读这些文档：我希望您通过参数传递实现了导航，如果您还没有，请查看更新的代码。这很好，先生。但是有一个小问题。名字显示在这里的一行中。我不显示为列表。若要在一行中删除这两个
名称
，请删除外部
组件，并仅在该容器中保留
{parts.map（（name）=>（{name.name}））}

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