基于react-native的简单消息确认框showModel
在React Native中,可以使用react-native-modal
库来创建一个简单的消息确认框。以下是一个使用react-native-modal
的示例代码:
首先,安装react-native-modal
库:
npm install react-native-modal
然后,你可以创建一个自定义组件ShowModel
,如下所示:
import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Modal from 'react-native-modal';
const ShowModel = ({ visible, setVisible, title, message }) => {
return (
<Modal isVisible={visible}>
<View style={{ padding: 20, backgroundColor: 'white' }}>
<Text>{title}</Text>
<Text>{message}</Text>
<TouchableOpacity onPress={() => setVisible(false)}>
<Text>OK</Text>
</TouchableOpacity>
</View>
</Modal>
);
};
export default ShowModel;
使用ShowModel
组件:
import React, { useState } from 'react';
import { Button } from 'react-native';
import ShowModel from './ShowModel';
const App = () => {
const [modalVisible, setModalVisible] = useState(false);
return (
<View>
<Button title="Show Model" onPress={() => setModalVisible(true)} />
<ShowModel
visible={modalVisible}
setVisible={setModalVisible}
title="Confirmation"
message="Are you sure you want to proceed?"
/>
</View>
);
};
export default App;
在这个例子中,当用户点击按钮时,会显示一个模态框,提示用户进行确认。用户点击“OK”后,模态框会关闭。这个组件可以被重用在你的应用中,只需要改变title
和message
属性即可。
评论已关闭