1

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

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

应用程序.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 以导航到将显示有关所选名称的更多信息的组件？

任何帮助表示赞赏，干杯，N

4

1 回答 1

2

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

如果您真的想导航到详细信息屏幕，则必须传递一个函数并调用该属性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组件内单击“+”。当然你不必创建一个新组件，你也可以定义所有的标记内联，但是如果你使用一个新的组件，它会更干净和可重用。

于 2021-03-04T11:15:23.923 回答