taro/src/components/layout/TableCell.tsx

import { View, Text, Image } from "@tarojs/components";
import './TableCell.scss'

export default function Component(props: {
    children?: React.ReactNode,
    title: string,
    showArrow?: boolean,
    showMarginBottom?: boolean,
    onClick?: Function
}) {

    function onClick() {
        if (props.onClick) {
            props.onClick()
        }
    }

    return <View onClick={onClick} className={props.showMarginBottom ? "table_cell table_cell_margin_bottom" : "table_cell"}>
        <View style={{ flex: 1,display:'flex',flexDirection:'row',alignItems:'center' }}>
            <Text className='table_cell_title'>{props.title}</Text>
        </View>
        {
            props.children
        }
        {
            props.showArrow && <Image src={require('@assets/images/arrow3.png')} className="table_cell_arrow" />
        }
    </View>
}