高階組件約定俗成以with開頭

import React, { useEffect } from 'react';
import { TouchableOpacity, Image, StyleSheet } from 'react-native';type IReactComponent = React.ClassicComponentClass| React.ComponentClass| React.FunctionComponent| React.ForwardRefExoticComponent<any>;import icon_add from '../assets/images/icon_add.png';export default <T extends IReactComponent>(OriginView: T, type: string): T => {const HOCView = (props: any) => {useEffect(() => {reportDeviceInfo();}, []);const reportDeviceInfo = () => {// 模擬上報const deviceInfo = {deviceId: 1,deviceName: '',modal: '',storage: 0,ip: '',};// reportDeviceInfo(deviceInfo);}return (<><OriginView {...props} /><TouchableOpacitystyle={styles.addButton}onPress={() => {console.log(`onPress ...`);}}><Image style={styles.addImg} source={icon_add} /></TouchableOpacity></>);}return HOCView as T;
}const styles = StyleSheet.create({addButton: {position: 'absolute',bottom: 80,right: 28,},addImg: {width: 54,height: 54,resizeMode: 'contain',},
});

import React, { useEffect } from 'react';
import {StyleSheet,View,Image,Text,
} from 'react-native';import icon_avatar from '../assets/images/default_avatar.png';
import withFloatButton from './withFloatButton';export default withFloatButton(() => {const styles = darkStyles;return (<View style={styles.content}><Image style={styles.img} source={icon_avatar} /><Text style={styles.txt}>個人信息介紹</Text><View style={styles.infoLayout}><Text style={styles.infoTxt}>各位產品經理大家好，我是個人開發者張三，我學習RN兩年半了，我喜歡安卓、RN、Flutter，Thank you!。</Text></View></View>);
}, 'InfoView');const darkStyles = StyleSheet.create({content: {width: '100%',height: '100%',backgroundColor: '#353535',flexDirection: 'column',alignItems: 'center',paddingHorizontal: 16,paddingTop: 64,},img: {width: 96,height: 96,borderRadius: 48,borderWidth: 4,borderColor: '#ffffffE0',},txt: {fontSize: 24,color: 'white',fontWeight: 'bold',marginTop: 32,},infoLayout: {width: '90%',padding: 16,backgroundColor: '#808080',borderRadius: 12,marginTop: 24,},infoTxt: {fontSize: 16,color: 'white',},
});