基于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属性即可。