推荐一个全新体验的React Native模态组件:Modalize
Modalize 是一个在 React Native 中实现的模态组件,它提供了一些额外的功能,如全屏填充、手势关闭、列表滚动等。
以下是一个简单的使用示例:
import React, { useRef } from 'react';
import { Text, View, Button } from 'react-native';
import Modalize from 'react-native-modalize';
const App = () => {
const modalizeRef = useRef(null);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button
title="Open Modal"
onPress={() => {
if (modalizeRef.current) {
modalizeRef.current.open();
}
}}
/>
<Modalize
ref={modalizeRef}
HeaderComponent={<View style={{ height: 100, backgroundColor: 'blue' }} />}
footerHeight={100}
>
<Text>This is the content of the modal</Text>
<Button
title="Close Modal"
onPress={() => {
if (modalizeRef.current) {
modalizeRef.current.close();
}
}}
/>
</Modalize>
</View>
);
};
export default App;
在这个例子中,我们创建了一个简单的应用,其中包含一个按钮,当按下时会打开一个模态窗口。模态内容是通过 <Modalize>
组件定义的,其中包含一些文本和另一个关闭模态的按钮。通过使用 ref
和 modalizeRef.current.open()
和 modalizeRef.current.close()
方法,我们可以控制模态窗口的打开和关闭。
评论已关闭