英文:
How can I navigate to different screens using TouchableOpacities in a React Native FlatList?
问题
你想问关于在React Native中使用Flatlist的问题。如何在使用TouchableOpacity时制作Flatlist以及如何使其成为列。我希望每个TouchableOpacity都可以进入不同的屏幕。我们可以这样做吗？也许需要创建一个函数？或者其他方法？请帮我，我一点头绪都没有 :")
这是Flatlist的结果：
这是我的HomeScreen代码，用于创建屏幕截图上的Flatlist。如你所见，我只能创建一个TouchableOpacity并转到“BossScreen”。
<FlatList
data={categoryList}
key={3}
numColumns={3}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.flatListContainer}
showsVerticalScrollIndicator={false}
renderItem={({ item }) =>{
return(
<TouchableOpacity
style={styles.button}
onPress={
() => navigation.navigate('BossScreen',{ categoryId: item.id })
}
>
<Image
source={{uri:item.icon}}
style={styles.icon}
/>
<Text style={styles.itemName}>{item.name}</Text>
</TouchableOpacity>
)
}}
/>
这是我的MainNavigator.js：
<NavigationContainer>
<Stack.Navigator initialRouteName="MainScreen">
<Stack.Screen
name="MainScreen"
component={MainScreen}
options={{
title: 'ArcanePedia',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="MagicScreen"
component={MagicScreen}
options={{
title: 'Magic',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
// 其他屏幕...
<Stack.Screen
name="BossScreen"
component={BossScreen}
options={{
title: 'Boss',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
</Stack.Navigator>
</NavigationContainer>
我期望我仍然可以使用Flatlist，并且每个“item”都可以进入他们自己的屏幕。
P.S. 我希望你们能理解我的意思。对于我的英文不太好，我很抱歉 :")
英文:
I want to ask about Flatlist on React Native. How to make Flatlist if there are using TouchaleableOpacity and make a column. I want each of the TouchaleableOpacity can go to different Screen. Can we make it like that? Maybe make a function? Or something? Please i don't have a clue :")
This is the result of Flatlist
This is my HomeScreen Code to make that flatlist on the Screenshot. As you can see, i just can make 1 TouchaleableOpacity and go to "BossScreen"
<FlatList
data={categoryList}
key={3}
numColumns={3}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.flatListContainer}
showsVerticalScrollIndicator={false}
renderItem={({ item }) =>{
return(
<TouchableOpacity
style={styles.button}
onPress={
() => navigation.navigate('BossScreen',{ categoryId: item.id })
}
>
<Image
source={{uri:item.icon}}
style={styles.icon}
/>
<Text style={styles.itemName}>{item.name}</Text>
</TouchableOpacity>
)
}}
/>
This is my MainNavigator.js
<NavigationContainer>
<Stack.Navigator initialRouteName="MainScreen">
<Stack.Screen
name="MainScreen"
component={MainScreen}
options={{
title: 'ArcanePedia',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="MagicScreen"
component={MagicScreen}
options={{
title: 'Magic',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="FightingStyleScreen"
component={FightingStyleScreen}
options={{
title: 'Fighting Style',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="WeaponScreen"
component={WeaponScreen}
options={{
title: 'Weapons',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="StorylineScreen"
component={StorylineScreen}
options={{
title: 'StoryLine',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="StatsScreen"
component={StatsScreen}
options={{
title: 'Boss',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
<Stack.Screen
name="BossScreen"
component={BossScreen}
options={{
title: 'Boss',
headerStyle: {
backgroundColor: '#0074C4',
},
headerTitleStyle: {
color: 'white',
fontSize: 24
},
headerLeft: null,
headerTitleAlign: 'center',
}}
/>
</Stack.Navigator>
</NavigationContainer>
I expecting i can still using Flatlist and make every "item" can go through on their screen.
Ps: I hope you guys can understand want i mean. Sorry for my english is not good :")
答案1
得分: 1
是的，你可以这样做，在你的catagoryList中添加一个键值对，例如："screen: 'MagicScreen'"，然后在你的renderItem中，只需引用这个键，例如：
onPress={() => navigation.navigate(item.screen, { categoryId: item.id })}
英文:
yes you can do that, in your catagoryList have a key value pair, eg. "screen: 'MagicScreen'", ... and then in your renderItem, just reference the key, eg.
onPress={
() => navigation.navigate(item.screen,{ categoryId: item.id })
}
答案2
得分: 0
如果我理解正确，您想根据所按下的组件导航到一个屏幕。然而，我们需要查看categoryList以便给出精确的答案，因为它基于该列表呈现FlatList。
但是，如果categoryList包含屏幕名称，解决方案可能会如下所示：
const screenNames = ['MagicScreen', 'FightingStyleScreen', 'WeaponScreen', 'StorylineScreen', 'StatsScreen', 'BossScreen'];
<FlatList
data={screenNames}
renderItem={({ item, index }) => {
const screenName = screenNames[index];
const params = screenName === 'BossScreen' ? { categoryId: item.id } : {};
const navigateToScreen = () => navigation.navigate(screenName, params);
return (
<TouchableOpacity style={styles.button} onPress={navigateToScreen}>
<Image source={{ uri: item.icon }} style={styles.icon} />
<Text style={styles.itemName}>{item.name}</Text>
</TouchableOpacity>
);
}}
keyExtractor={(item, index) => index.toString()}
/>
您可以根据需要为哪个组件传递item.id，修改以下行：
const params = screenName === 'BossScreen' || 'MagicScreen' ...etc
英文:
If I understood correctly, you want to navigate to a screen based on the pressed component. However, we need to see categoryList to give precise answer, since its rendering flatlist based on that.
but if categoryList contains screenNames, solution would look somewhat like this:
const screenNames = ['MagicScreen', 'FightingStyleScreen', 'WeaponScreen', 'StorylineScreen', 'StatsScreen', BossScreen];
<FlatList
data={screenNames}
renderItem={({ item, index }) => {
const screenName = screenNames[index];
const params = screenName === 'BossScreen' ? { categoryId: item.id } : {};
const navigateToScreen = () => navigation.navigate(screenName, params);
return (
<TouchableOpacity style={styles.button} onPress={navigateToScreen}>
<Image source={{ uri: item.icon }} style={styles.icon} />
<Text style={styles.itemName}>{item.name}</Text>
</TouchableOpacity>
);
}}
keyExtractor={(item, index) => index.toString()}
/>
u can change
> const params = screenName ==='BossScreen' || 'MagicScreen' ...etc
based on which component requires item id
答案3
得分: 0
你可以添加一个名为renderItem的单独函数，并在FlatList的renderItem中调用它，
在你的FlatList组件中进行如下更改，
每个FlatList中的TouchableOpacity将根据item.id导航到不同的屏幕。只需根据实际的屏幕组件和要求更新屏幕名称和参数。
英文:
You can add a separate function called renderItem and call that into your renderItem in the FlatList ,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
renderItem={({ item }) => {
let screenName;
let screenParams = {};
// Determine the screen name and parameters based on the item
switch (item.id) {
case 'magic':
screenName = 'MagicScreen';
break;
case 'fightingStyle':
screenName = 'FightingStyleScreen';
break;
case 'weapons':
screenName = 'WeaponScreen';
break;
// Add more cases for other items if needed
default:
screenName = 'BossScreen';
screenParams = { categoryId: item.id };
break;
}
return (
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate(screenName, screenParams)}
>
<Image source={{ uri: item.icon }} style={styles.icon} />
<Text style={styles.itemName}>{item.name}</Text>
</TouchableOpacity>
);
}}
<!-- end snippet -->
And change your FlatList component like this ,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<FlatList
data={categoryList}
key={3}
numColumns={3}
keyExtractor={(item) => item.id}
contentContainerStyle={styles.flatListContainer}
showsVerticalScrollIndicator={false}
renderItem={renderItem}
/>
<!-- end snippet -->
Each TouchableOpacity in your FlatList will navigate to a different screen based on the item.id. Just make sure to update the screen names and parameters according to your actual screen components and requirements.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论