//第一种实现方式通过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>