react-native - React Native - 通过单击flatList中的项目导航到详细信息屏幕?
问题描述
我正在使用 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
解决方案
首先,看起来您并不想导航到详细信息屏幕,而是展开与平面列表位于同一屏幕中的详细信息组件。
如果您真的想导航到详细信息屏幕,则必须传递一个函数并调用该属性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
组件内单击“+”。当然你不必创建一个新组件,你也可以定义所有的标记内联,但是如果你使用一个新的组件,它会更干净和可重用。
推荐阅读
- javascript - ajax调用未达到成功功能
- c# - 用于 C# 中 Rabbit MQ 模拟连接的 xUnit
- unity3d - 在 Unity 中模拟深度相机
- python - 将可调用/绑定方法变成对人类更易读的东西?
- python - 将 json 对象列表展平为表,其中包含 Databricks 中每个对象的列
- html - 悬停时将一个块移到另一个块上
- python - Python - 在数据框中运行 for 循环的更快方法
- c# - 在基类中定义后,是否需要在派生类中定义相同的接口?
- javascript - 将一些数据结果迁移到另一个jsp页面
- sql - sql - 多表选择最后一个值名称