//第一种实现方式通过pros传递
//TsExample
import IconMore from '@/assets/iconfont/IconMore';
import { $fontSize16, $fontWeight, $row } from '@/styles/commonStyles';
import * as React from 'react';
import {
StyleSheet,
View,
Text,
ViewProps,
TouchableHighlight,
} from 'react-native';
type TsExampleProps = {
text?: string; // 右侧文字
onBack?: () => void; // 自定义会调 点击backIcon 图标触发
centerClick?: () => void; // 点title文字
}
const TsExample: React.FC<TsExampleProps> = (props) => {
const {
centerClick,
onBack,
text,
} = props;
if (centerClick) {
return <View>
<View style={[$row, { justifyContent: 'space-between', alignItems: 'center', marginTop: 16, marginBottom: 16 }]}>
<Text style={[$fontSize16, $fontWeight, { color: '#505A6B' }]}>{text}</Text>
<TouchableHighlight onPress={centerClick}>
<IconMore size={30} />
</TouchableHighlight>
</View>
<View style={{ height: 1, backgroundColor: '#eee', width: '100%' }} />
</View>
}
return <View>
<View style={[$row, { justifyContent: 'space-between', alignItems: 'center', marginTop: 16, marginBottom: 16 }]}>
<Text style={[$fontSize16, $fontWeight, { color: '#505A6B' }]}>{text}</Text>
<IconMore size={30} />
</View>
<View style={{ height: 1, backgroundColor: '#eee', width: '100%' }} />
</View>
}
export default TsExample;
//TsExampleProps
import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
export type TsExampleProps = {
text?: string; // 右侧文字
onBack?: () => void; // 自定义会调 点击backIcon 图标触发
centerClick?: () => void; // 点title文字
};
//调用
<TsExample text={'this is child'} centerClick={_languageClick} />
const _languageClick = () => {
console.log('ssssssssss')
};
//第二种实现方式 useImperativeHandle/forwardRef
import {Modal, StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle} from 'react-native';
import React, {useEffect, useState, forwardRef, useImperativeHandle, Ref} from 'react';
import {KeyboardAvoidingView} from 'native-base';
interface Props {
show?: boolean;
onClose?: () => void;
isCancelable?: boolean;
children: React.ReactNode;
secondDialog?: React.ReactNode;
style?: StyleProp<ViewStyle>;
secondDialogStyle?: StyleProp<ViewStyle>;
layoutStyle?: StyleProp<ViewStyle>;
}
export interface BaseDialogRef {
showModal: () => void;
showSecondDialog: () => void;
hideSecondDialog: () => void;
}
function BaseDialog({show, onClose, isCancelable, children, style, layoutStyle, secondDialog, secondDialogStyle}: Props, ref: Ref<BaseDialogRef>) {
const [isVisible, setIsVisible] = useState(false);
const [isShowSecond, setShowSecond] = useState(false);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(149, 157, 165, 0.5)',
},
modalStyle: {
width: 386,
minHeight: 253,
zIndex: 99999,
borderRadius: 12,
backgroundColor: '#ffffff',
},
});
useEffect(() => {
if (show != null) setIsVisible(show);
}, [show]);
useImperativeHandle(ref, () => ({
showModal() {
setIsVisible(true);
},
showSecondDialog() {
console.log('------showSecondDialog-------', !!secondDialog);
setShowSecond(true);
},
hideSecondDialog() {
setShowSecond(false);
},
}));
const closeModal = () => {
setIsVisible(false);
onClose && onClose();
};
return (
<Modal transparent={true} visible={isVisible} animationType={'fade'} onRequestClose={closeModal}>
<KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
<View style={styles.container}>
<TouchableOpacity
style={[{flex: 1, justifyContent: 'center', alignItems: 'center'}, layoutStyle]}
activeOpacity={1}
onPress={() => {
if (isCancelable) closeModal();
}}>
<TouchableOpacity activeOpacity={1} style={[styles.modalStyle, style]}>
{children}
</TouchableOpacity>
</TouchableOpacity>
{isShowSecond && secondDialog ? (
<TouchableOpacity
style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, backgroundColor: '#21242D99', justifyContent: 'center', alignItems: 'center'}}
onPress={() => setShowSecond(false)}>
<TouchableOpacity activeOpacity={1} style={[styles.modalStyle, secondDialogStyle]}>
{secondDialog}
</TouchableOpacity>
</TouchableOpacity>
) : null}
</View>
</KeyboardAvoidingView>
</Modal>
);
}
export default forwardRef(BaseDialog);
//使用
const [isVisible, setIsVisible] = React.useState(true);
<BaseDialog
style={{ alignItems: 'center', width: '80%', minHeight: 150 }}
ref={baseRef}
show={isVisible}
onClose={() => {
setIsVisible(false);
}}>
<TouchableHighlight onPress={() => { setIsVisible(false) }}>
<View style={{ paddingHorizontal: 12, paddingVertical: 24, minHeight: 105 }}>
<Text style={[{ fontSize: 18, lineHeight: 25.2, color: '#333', fontWeight: 'bold', textAlign: 'center' }]}>ssss</Text>
</View>
</TouchableHighlight>
<View style={{ flexDirection: 'row' }}>
</View>
</BaseDialog>
