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

Posted 2023-02-16

【中文标题】如何单击 Flatlist 中的项目以显示另一个组件而不在抽屉中显示它

【英文标题】：How to Click on item in Flatlist to display another component without displaying it in the drawer

【发布时间】：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，谢谢！

【参考方案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;