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

Question

我在一个页面上有 6 个不同的按钮，每个按钮都需要打开一个模式 window。现在我不想写出 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 的新手。

EDIT - 我不想同时打开多个模式。一次只会打开一个。但我希望能够根据单击的按钮更改 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>
   </>

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

React Native multiple modals on one page question

modal-dialog

react-native