React Native - 通过单击 flatList 中的项目导航到详细信息屏幕？

Question

我正在使用 flatList 从 API 中呈现名称。然后我试图让每个项目都可以点击并显示有关他们点击的那个人的更多信息，但我不确定如何去做。我在 Whosebug 上阅读过的一些包含示例链接的帖子现在已失效且无法使用。

我正在使用 DrawerNavigation，我会尽力包含所需的代码，我的所有屏幕都在 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>
 
  );
};

下面每个屏幕都有自己的功能，这里是 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>
   
  );

---编辑----

我的 flatlist 目前是这样的

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

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

感谢任何帮助，干杯， N

Answer 1

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

如果您真的想导航到详细信息屏幕，则必须将调用 navigation.navigate 的函数传递给 renderItem 属性中的每个项目。

像这样：

<FlatList
 data={data}
 keyExtractor={({ id }, index) => id}
 renderItem={({ item }) => (
   <TouchableOpacity onPress={() => {
      navigation.navigate('ItemDetail', {data: item}
     }
   )}>
      <Text>
       +
      </Text>
   </TouchableOpacity>
/>

如果你想传递一个组件，你必须这样做：

<FlatList
 data={data}
 keyExtractor={({ id }, index) => id}
 renderItem={({ item }) => (
   <ItemDetail item={item}/>    
  )}
/>

然后处理新 ItemDetail 组件中“+”的点击。因为您不必创建新组件，您也可以内联定义所有标记，但如果您使用新组件，它会更干净且可重用。

React Native - 通过单击 flatList 中的项目导航到详细信息屏幕？

React Native - Navigate to detail screen by clicking on item in flatList?

react-native

flatlist