React native 反应本机-通过单击平面列表中的项目导航到详细信息屏幕？

我使用flatList从API中呈现名称。然后，我试图让每个项目都可以点击，并显示更多关于他们点击的人的信息，我不知道该怎么做。我在这里读到的一些关于Stackoverflow的帖子，有一些链接到示例，现在已经过时了，不可用了

我正在使用DroperNavigation，我会尽我最大的努力包含所需的代码，我的所有屏幕都在app.js文件中

App.js

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerPosition="right">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Players" component={PlayersScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
 
  );
};

导出默认函数App（）{
返回(
);
};

每个屏幕都有自己的函数，下面是PlayerScreen示例，其中包含由flatList呈现的列表

function PlayersScreen( { navigation } ) {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
  fetch('http://***.**.***.**:3000/players',
   { credentials: "same-origin",
   headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
   },
  },
  )
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}, []);
  return (
      <View style={{marginTop: StatusBar.currentHeight}}>
      <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer()) }>
            <Text>+</Text>
        </TouchableOpacity>

        <FlatList
            data={data}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) => (
              <Text>{item.Name}</Text>
            )}
          />
      </View>
   
  );

函数播放器屏幕（{navigation}）{
const[isLoading，setLoading]=useState（true）；
const[data，setData]=useState（[]）；
useffect（（）=>{
fetch（'http://****.*.*：3000/玩家'，
{凭证：“相同来源”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”
},
},
)
.then（（response）=>response.json（））
.然后（（json）=>setData（json））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}, []);
返回(
navigation.dispatch（DrawerActions.toggleDrawer（））}>
+
id}
renderItem={（{item}）=>(
{item.Name}
)}
/>
);

---编辑----

我的平面列表现在看起来像这样

  <FlatList
            data={data}
            keyExtractor={item => item.Name}
            renderItem={({ item }) => (
              <Text style={{fontSize: 32, color: 'white'}} onPress={() => alert("clicked")}>{item.Name}</Text>
            )}
          /> 

item.Name}
renderItem={（{item}）=>(
警报（“单击”）}>{item.Name}
)}
/> 

那么现在我如何处理onPress以导航到一个组件，该组件将显示有关所选名称的更多信息

感谢您的帮助，干杯，

---

N

首先，看起来您并不是真的想导航到详细信息屏幕，而是要展开与平面列表位于同一屏幕中的详细信息组件

如果确实要导航到详细信息屏幕，则必须传递一个函数，调用

导航。导航
到
renderItem
属性中的每个项目

像这样：

id}
renderItem={（{item}）=>(
{
navigation.navigate（'ItemDetail'，{data:item}
}
)}>
+
/>

如果要传递组件，必须执行以下操作：

id}
renderItem={（{item}）=>(
)}
/>

然后点击“+”按钮在新的
ItemDetail
组件内部。当然，您不必创建新组件，也可以内联定义所有标记，但如果使用新组件，它更干净且可重用。
首先，看起来您并不是真的想导航到详细信息屏幕，而是要展开驻留的详细信息组件在与平面列表相同的屏幕中

如果确实要导航到详细信息屏幕，则必须传递一个函数，调用
导航。导航
到
renderItem
属性中的每个项目

像这样：

id}
renderItem={（{item}）=>(
{
navigation.navigate（'ItemDetail'，{data:item}
}
)}>
+
/>

如果要传递组件，必须执行以下操作：

id}
renderItem={（{item}）=>(
)}
/>

然后在新的
itemdail
组件中点击“+”。当然，您不必创建新组件，您也可以内联定义所有标记，但如果使用新组件，则标记更清晰且可重复使用。
如果您想导航到新屏幕，则必须通过
（）=>{navigation.navigate（'Player'），{data:item}）
到onPress函数。但是您的抽屉导航器中没有另一个名为“Player”的屏幕，这就是为什么我假设您希望保持在同一个屏幕上“Players”当有人按下时，打开平面列表中播放器的信息。你能澄清一下你是否真的想导航到另一个屏幕吗？在这种情况下，你必须创建一个新的屏幕“播放器”。哦，我这部分的错误信息。我想在一个新组件中打开它，这样我会得到一个新屏幕，并且只在nex上查看选定的项目t组件。我不确定如何从平面列表发送ID/键，以便我在单击后到达的组件将仅显示有关该特定人员的信息。在这种情况下，您可以在
onPress（）
中使用
（）=>{navigation.navigate（'Player'，{data:item}）}
。
{data:item}
object将项目传输到新屏幕，在那里可以使用
route.params.data
提取项目。请看这里：您好，我尝试将这一行添加到我的平面列表：{navigation.navigate（DetailsScreen，{data:item}}}>{item.Name}，我在app.js函数DetailsScreen（{route，navigation}）{/*code*/}我得到：任何导航器都没有处理使用未定义有效负载导航的操作，他们会问我是否真的有一个名为“DetailsScreen”的屏幕。我现在已经这样做了，而且它似乎正在工作，谢谢你的帮助！我如何将你的评论标记为答案？如果你想导航到一个新屏幕，你必须通过
（）=>{navigation.NAVIGATE（'Player'，{data:item}）
到onPress函数。但是您的抽屉导航器中没有另一个名为“Player”的屏幕，这就是为什么我假设您希望保持在同一个屏幕上“Players”当有人按下时，打开平面列表中播放器的信息。你能澄清一下你是否真的想导航到另一个屏幕吗？在这种情况下，你必须创建一个新的屏幕“播放器”。哦，我这部分的错误信息。我想在一个新组件中打开它，这样我会得到一个新屏幕，并且只在nex上查看选定的项目t组件。我不确定如何从平面列表发送ID/密钥，所以