如何单击 Flatlist 中的项目以显示另一个组件而不在抽屉中显示它答案

【问题标题】：How to Click on item in Flatlist to display another component without displaying it in the drawer如何单击 Flatlist 中的项目以显示另一个组件而不在抽屉中显示它
【发布时间】：2021-12-26 21:09:43
【问题描述】：

我在抽屉里有 2 个屏幕，其中一个包括 Flatlist，我需要做的是只有这 2 个屏幕的抽屉，但是当用户点击 flatList 中的一个项目时，另一个组件（带有新屏幕）应显示项目详细信息。这是 app.js

const Drawer = createDrawerNavigator();
function App() {
  const [expenseList, setExpenseList] = useState([]);
  return (
    <NavigationContainer>
      <ExpenseContext.Provider value={{ expenseList, setExpenseList }}>
        <Drawer.Navigator>
          <Drawer.Screen name="Dashboard" component={Home} />
          <Drawer.Screen name="AddItem" component={AddItem} />
        </Drawer.Navigator>
      </ExpenseContext.Provider>
    </NavigationContainer>
  );
}
export default App;

这是主屏幕中 FlatList 的一部分

 <FlatList
        contentContainerStyle={{ paddingBottom: 20 }}
        style={styles.listContainer}
        data={expenseList}
        keyExtractor={(item, index) => item.key}

        renderItem={(data) => (
          <TouchableOpacity onPress={() => navigation.navigate("Detail")}>
            <View style={styles.info}>

              <View>
                <Text>{data.item.name}</Text>
                <Text numberOfLines={1}>
                  {data.item.description}
                </Text>
                <Text>{data.item.date}</Text>
              </View>

              <View>
                <Text>{data.item.amount}</Text>
              </View>
            </View>
          </TouchableOpacity>
        )}
      />

ps：我正在使用 v6，谢谢！

【问题讨论】：

标签： react-native navigation-drawer react-native-flatlist react-native-navigation

【解决方案1】：

我需要使用带有抽屉的嵌套堆栈导航。

function App() {
  const [expenseList, setExpenseList] = useState([]);
  return (
    <NavigationContainer>
      <ExpenseContext.Provider value={{ expenseList, setExpenseList }}>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={DrawerNavigation}
            options={{ headerShown: false }}
          />
          <Stack.Screen name="Detail" component={Detail} />
        </Stack.Navigator>
      </ExpenseContext.Provider>
    </NavigationContainer>
  );
}
export default App;

在 DrawerNavigation.js 中

const Drawer = createDrawerNavigator();

function DrawerNavigation() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Dashboard" component={Home} />
      <Drawer.Screen name="AddItem" component={AddItem} />
    </Drawer.Navigator>
  );
}
export default DrawerNavigation;

【讨论】：