推荐使用:React Native Simple Modal —— 简单易用的模态组件
React Native Simple Modal 是一个为 React Native 应用程序提供的模态组件。以下是如何使用它的示例代码:
首先,你需要安装这个库:
npm install rn-modal-view
然后,你可以在你的代码中引入并使用这个模态组件:
import React from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'rn-modal-view';
export default class App extends React.Component {
state = {
modalVisible: false,
};
render() {
return (
<View style={{ flex: 1 }}>
<Button
title="打开模态"
onPress={() => this.setState({ modalVisible: true })}
/>
<Modal
visible={this.state.modalVisible}
onTouchOutside={() => this.setState({ modalVisible: false })}
>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>这是一个模态窗口</Text>
<Button
title="关闭模态"
onPress={() => this.setState({ modalVisible: false })}
/>
</View>
</Modal>
</View>
);
}
}
在这个例子中,我们创建了一个按钮,点击后会将 modalVisible
状态设置为 true
,从而打开模态。模态中有一个按钮用于关闭模态,它会将 modalVisible
状态设置回 false
。这是一个简单的模态使用案例。
评论已关闭