import { Images } from '@/constants/images'; import { getParamConfig } from '@/services/user'; import { Image, ImageBackground } from 'expo-image'; import React, { forwardRef, useImperativeHandle, useState } from 'react'; import { ActivityIndicator, Dimensions, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'; import { WebView } from 'react-native-webview'; const { width } = Dimensions.get('window'); export interface RuleModalRef { show: (ruleKey?: string) => void; close: () => void; } export const RuleModal = forwardRef((props, ref) => { const [visible, setVisible] = useState(false); const [content, setContent] = useState(''); const [loading, setLoading] = useState(false); useImperativeHandle(ref, () => ({ show: (ruleKey = 'baoxiang_rule') => { setVisible(true); loadRule(ruleKey); }, close: () => setVisible(false), })); const loadRule = async (key: string) => { setLoading(true); try { const res = await getParamConfig(key); if (res && res.data) { // Simple HTML wrap const html = ` ${res.data} `; setContent(html); } } catch (e) { console.error(e); setContent('

加载失败

'); } finally { setLoading(false); } }; return ( setVisible(false)}> setVisible(false)}> {loading ? ( ) : ( )} ); }); const styles = StyleSheet.create({ overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center', }, container: { width: width * 0.9, alignItems: 'center', }, header: { width: '100%', alignItems: 'flex-end', marginBottom: -20, // Overlap zIndex: 10, paddingRight: 20, }, closeBtn: { padding: 10, }, closeIcon: { width: 30, height: 30, }, bg: { width: '100%', height: 400, // Adjust height paddingTop: 60, paddingHorizontal: 30, paddingBottom: 30, }, content: { flex: 1, overflow: 'hidden', }, webview: { flex: 1, backgroundColor: 'transparent', } });