Question

我正在使用 flatList 从 API 中渲染名称。然后我试图让每个项目都可以点击并显示他们点击的那个人的更多信息，但我不知道该怎么做。我在 Stackoverflow 上读到的一些帖子中包含指向示例的链接，现在已失效且无法使用。

我正在使用 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
            data={data}
            keyExtractor={item => item.Name}
            renderItem={({ item }) => (
              <Text style={{fontSize: 32, color: 'white'}} onPress={() => alert("clicked")}>{item.Name}</Text>
            )}
          />

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

感谢任何帮助，干杯，否

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 中的项目导航到详细信息屏幕？

1 个答案: