我在一页上有 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 模式中的信息。
最佳答案
您可以添加一个状态来处理触发的操作,然后根据此状态您可以更改模态的内容,查看示例并告诉我它是否适合您的情况:
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 - 在一页问题上 react native 多个模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65172040/