React Navigation v6点击FlatList项跳转详情且不在抽屉显示的实现

实现步骤 #

你需要让详情页不被抽屉导航直接管理，或者配置详情页不在抽屉菜单中渲染，以下是层级逻辑更清晰的常用实现方案：

步骤1：新增详情页组件并嵌套栈导航 #

你需要把首页Dashboard和详情页放在同一个栈导航中，作为抽屉导航的子页面，这样详情页默认不会出现在抽屉菜单中。
首先导入栈导航依赖（如果未安装先执行npm install @react-navigation/native-stack），然后创建栈导航容器：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 导入你自己实现的详情组件
import Detail from './pages/Detail';

const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen 
        name="Dashboard" 
        component={Home}
        // 如果你要保留抽屉的顶部导航栏，就关闭栈本身的header
        options={{ headerShown: false }}
      />
      <HomeStack.Screen 
        name="Detail" 
        component={Detail}
        options={{ title: '消费详情' }}
      />
    </HomeStack.Navigator>
  );
}

步骤2：修改抽屉导航配置 #

修改App.js中的抽屉配置，把原来Dashboard对应的组件替换成你刚写的栈导航容器，抽屉的菜单项不会发生变化：

const Drawer = createDrawerNavigator();
function App() {
  const [expenseList, setExpenseList] = useState([]);
  return (
    <NavigationContainer>
      <ExpenseContext.Provider value={{ expenseList, setExpenseList }}>
        <Drawer.Navigator>
          {/* 这里替换成栈导航组件 */}
          <Drawer.Screen name="Dashboard" component={HomeStackScreen} />
          <Drawer.Screen name="AddItem" component={AddItem} />
        </Drawer.Navigator>
      </ExpenseContext.Provider>
    </NavigationContainer>
  );
}
export default App;

步骤3：修改列表点击事件传递参数 #

修改Home页FlatList的onPress逻辑，把当前点击的条目数据传递到详情页：

<TouchableOpacity 
  onPress={() => navigation.navigate("Detail", { expenseItem: data.item })}
>
  {/* 原有视图内容不变 */}
</TouchableOpacity>

步骤4：详情页接收参数渲染 #

在Detail组件中接收传递过来的条目数据，渲染对应内容即可：

function Detail({ route }) {
  // 接收传递的参数
  const { expenseItem } = route.params;
  return (
    <View>
      <Text>消费名称：{expenseItem.name}</Text>
      <Text>消费描述：{expenseItem.description}</Text>
      <Text>消费日期：{expenseItem.date}</Text>
      <Text>消费金额：{expenseItem.amount}</Text>
    </View>
  );
}

轻量替代方案 #

如果你不想调整嵌套结构，可以直接把详情页加到抽屉导航中，配置不在抽屉菜单显示即可，修改App.js的抽屉配置：

<Drawer.Navigator>
  <Drawer.Screen name="Dashboard" component={Home} />
  <Drawer.Screen name="AddItem" component={AddItem} />
  {/* 新增详情页，配置不在抽屉菜单渲染 */}
  <Drawer.Screen 
    name="Detail" 
    component={Detail}
    options={{
      drawerItemStyle: { display: 'none' },
      title: '消费详情'
    }}
  />
</Drawer.Navigator>

后续的参数传递和详情页渲染逻辑和上述方案一致。

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