React Native中如何将FlatList列表项转为可跳转食谱的按钮？

步骤1：完成React Navigation基础配置 #

先确认安装必要依赖：

npm install @react-navigation/native @react-navigation/native-stack
npx pod-install ios # iOS用户执行
npm install react-native-screens react-native-safe-area-context

步骤2：修改App.js配置导航栈 #

调整App.js，配置包含列表页和详情页的栈导航结构：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WordList from './WordList'; // 你的WordList组件路径
import RecipeDetail from './RecipeDetail'; // 新建详情页组件

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="WordList">
        <Stack.Screen name="WordList" component={WordList} options={{ title: '食谱列表' }} />
        <Stack.Screen name="RecipeDetail" component={RecipeDetail} options={{ title: '食谱详情' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

步骤3：改造WordList组件的FlatList项 #

用TouchableOpacity包裹列表项，添加点击事件触发导航跳转并传递食谱数据：

import { View, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';
import listOfRecipes from './listOfRecipes'; // 导入食谱数据

export default function WordList({ navigation }) {
  const renderItem = ({ item }) => (
    <TouchableOpacity 
      style={styles.itemContainer}
      onPress={() => navigation.navigate('RecipeDetail', { recipe: item })}
    >
      <Text style={styles.itemText}>{item.name}</Text>
      {/* 保留你原本的列表项其他内容 */}
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={listOfRecipes}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
    />
  );
}

const styles = StyleSheet.create({
  itemContainer: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  itemText: {
    fontSize: 18
  }
});

步骤4：创建RecipeDetail详情页组件 #

新建RecipeDetail.js，接收导航参数并展示食谱详情：

import { View, Text, StyleSheet } from 'react-native';

export default function RecipeDetail({ route }) {
  const { recipe } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{recipe.name}</Text>
      <Text style={styles.subtitle}>食材：</Text>
      <Text style={styles.content}>{recipe.ingredients}</Text>
      <Text style={styles.subtitle}>做法：</Text>
      <Text style={styles.content}>{recipe.steps}</Text>
      {/* 按你的listOfRecipes数据结构展示对应字段 */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16
  },
  subtitle: {
    fontSize: 18,
    fontWeight: '600',
    marginTop: 12,
    marginBottom: 8
  },
  content: {
    fontSize: 16,
    lineHeight: 24
  }
});

补充说明 #

• 确保listOfRecipes.js中的每个食谱对象包含唯一id字段，以及name、ingredients等需要展示的字段。
• 若需更丰富的点击反馈，可将TouchableOpacity替换为TouchableHighlight或Pressable。

内容的提问来源于stack exchange，提问作者Shan