react-native - 在一页问题上 react native 多个模态

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 的新手。
编辑 - 我不想一次打开多个模态。一次只开放一个。但我希望能够根据单击的按钮更改 ONE 模式中的信息。

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>
   </>