encapsulation Component

复用组件一：

//类型定义
export interface IFooterBarProps {
    shortOrderTime?: string;  //最近预订时间
    imEntranceUrl?: string;  //问一问跳转的链接
    onPressShowGoods: () => void;  //点击右侧按钮显示商品
    onPressIM?: (url: string) => () => void;  //点击问一问之后的操作
    buttonText?: string;  //右侧按钮名
    imTitle?: string;  //问一问标题
    imIcon?: string;  //问一问图标
}
/**
 * 底部操作组件
 * @param {IFooterBarProps} props 组件属性
 */
export const FooterBar = (props?: IFooterBarProps) => {
    // const { shortOrderTime = '', imEntranceUrl = '', buttonText = '查看房型' } = props || {};
    // const orderTimeView = renderOrderTime(shortOrderTime);
    const { imEntranceUrl = '' } = props || {};
    return imEntranceUrl ? renderShowIMEntranceFooterBar(props) : renderNoIMEntranceFooterBar(props);
};
export default FooterBar;

//具体封装
const renderShowIMEntranceFooterBar = (props?: IFooterBarProps) => {
    const { shortOrderTime = '', onPressShowGoods = null, onPressIM = null, imEntranceUrl = '', buttonText = '查看房型', imTitle = '', imIcon = '' } = props || {};
    const infoArray = shortOrderTime.split('：');
    const viewArray = [];
    infoArray.forEach(item => viewArray.push(<Text style={styles.orderTimeText}>{item}</Text>));

    return (
        <View style={[stylesNew.item, { paddingBottom: isiphoneX ? 34 : 0 }]}>
            <ClickFeedback.Opacity style={stylesNew.imContainer} onPress={onPressIM(imEntranceUrl)}>
                <Image style={stylesNew.imIcon} source={{ uri: imIcon }} />
                <Text style={[stylesNew.txt, stylesNew.imDesc]}>{imTitle}</Text>
            </ClickFeedback.Opacity>
            {shortOrderTime ? (
                <>
                    <View style={stylesNew.dividingLine} />
                    <View style={stylesNew.orderTimeContainer}>
                        <Text style={stylesNew.orderTimeText}>{infoArray[0]}：</Text>
                        <Text style={stylesNew.orderTimeText}>{infoArray[1]}</Text>
                    </View>
                    <ClickFeedback.Opacity style={[stylesNew.btnNew, { marginLeft: 12 }]} onPress={onPressShowGoods}>
                        <Text style={stylesNew.btnTextNew}>{buttonText}</Text>
                    </ClickFeedback.Opacity>
                </>
            ) : (
                <>
                    <ClickFeedback.Opacity style={[stylesNew.btnNew, { marginLeft: 2, flex: 1 }]} onPress={onPressShowGoods}>
                        <Text style={stylesNew.btnTextNew}>{buttonText}</Text>
                    </ClickFeedback.Opacity>
                </>
            )}
        </View>
    );
};