在一页问题上反应本机多模式

Question

我在一页上有 6 个不同的按钮，每个按钮都需要打开一个模式窗口。现在我不想写出 6 种不同的情态动词。因此，当用户按下第一个按钮时，它将调出一个包含“购物信息”报告信息的模式，而在第二个按钮上，它将调出“图形信息”信息。

const [modalVisible, setModalVisible] = useState(false);

    <TouchableOpacity style={styles.expensesList} onPress={() => {setModalVisible(true)}}>
      <FontAwesome5 name="shopping-cart" size={40} color="black" style={styles.iconStyle} />
    </TouchableOpacity>

    <TouchableOpacity style={styles.expensesList} onPress={}> {/* Different modal? */}
      <Foundation name="graph-bar" size={40} color="black" />
    </TouchableOpacity>

<Modal
    animationType="slide"
    transparent={true}
    visible={modalVisible}
    style={{ margin: 0 }}
    onRequestClose={() => {}}>

// Different info based on which button was pressed

</Modal>

这些用于报告目的，因此每个都将具有相同的样式和关闭按钮。但我希望只能有一种模式，根据按下的按钮打开不同的模式。这可行吗？

如果我不够清楚，请告诉我。我是 React Native 的新手。

编辑- 我不想一次打开多个模式。一次仅开放一个。但我希望能够更改一个模式中的信息，具体取决于单击的按钮。

Answer 1

您可以添加一个状态来处理触发的操作，然后根据此状态您可以更改模式的内容，请参阅示例并让我知道它是否适合您的情况：

const [actionTriggered, setActionTriggered] = useState(''); // here we go

const [modalVisible, setModalVisible] = useState(false);

   <>
      <TouchableOpacity style={styles.expensesList} onPress={() => {
        setModalVisible(true);
        setActionTriggered('ACTION_1'); // HERE
      }}>
        <FontAwesome5 name="shopping-cart" size={40} color="black" style={styles.iconStyle} />
      </TouchableOpacity>

      <TouchableOpacity style={styles.expensesList} onPress={() => {
        setActionTriggered('ACTION_2'); // HERE
      }}> {/* Different modal? */}
        <Foundation name="graph-bar" size={40} color="black" />
      </TouchableOpacity>

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        style={{ margin: 0 }}
        onRequestClose={() => { }}>

        {/* inside the modal view, depending on the action type do something */}
        {actionTriggered === 'ACTION_1' ?
          <View>
            {/* .... something you want to show in case of the first modal opened  */}
          </View> :
          actionTriggered === 'ACTION_2' ?
            <View>
              {/* // .... something you want to show in case of the second modal opened  */}
            </View> :
            null}
      </Modal>
   </>