Question

我有我正在用react-native编写的这个应用程序，其中有一个屏幕，该屏幕显示约50-100张图像以及一些与它们相关的操作按钮，包括一个弹出菜单（每个与它们相关联）。有没有一种方法可以对所有图像使用相同的弹出菜单（相同的实例）？

             <View>
             // react-native-paper Card Component
               <Card style={styles.card}>
                <Card.Content style={styles.cardContent}>
                  <Card.Cover
                    style={{ height: 60, width: 60 }}
                    source={
                      item.avatar ||
                      (item.gender === 'male'
                        ? require('../../assets/male.jpeg')
                        : require('../../assets/female.jpeg'))
                    }
                  />
                  <Caption style={styles.title}>{item.name}</Caption>
                </Card.Content>
                <Card.Actions>
                  <Avatar.Text
                    style={{ backgroundColor: 'skyblue' }}
                    size={24}
                    label={`#${item.id}`}
                  />
                 // react-native-paper Menu Component
                 // can i somehow use a single component for all cards?
                  <Menu
                    visible={this.state.visible}
                    onDismiss={this._closeMenu}
                    anchor={
                      <IconButton
                        icon="menu"
                        theme={theme}
                        size={20}
                        onPress={() => console.log('Pressed')}
                      />
                    }
                  >
                    <Menu.Item onPress={() => {}} title="Item 1" />
                    <Menu.Item onPress={() => {}} title="Item 2" />
                    <Divider />
                    <Menu.Item onPress={() => {}} title="Item 3" />
                  </Menu>
                </Card.Actions>
              </Card>
                  .
                  .
          //same card multiple times
                  .
                  .
             </View>

Answer 1

您可以将Menu组件提取到自己的自定义组件中，然后在卡中重复使用。这意味着您只需要定义一次Menu，然后多次使用一个组件（这将为每张卡创建Menu的单独实例，彼此独立发挥作用）。

您也可以对Card组件执行相同的操作，这意味着您不必多次定义相同的内容。将使您的代码更简洁，更实用（您在组件中定义的方法将仅针对该组件的实例执行，而不会像上述代码那样在全局级别上执行-例如this._closeMenu仅针对{ {1}}的定义实例）

在这里看看如何提取和重用组件-https://caster.io/lessons/react-native-extracting-and-writing-react-native-components

我可以在屏幕上的多个位置重用组件的单个实例吗？

1 个答案: