ReactNative Hooks写法抽离子view

  const itemTop = (itemName: any, itemIcon: any) => {
    return <View style={[$row, $flex1, { padding: 8, backgroundColor: '#f3f6ff', borderRadius: 10, }]}>
      <IconFont size={65} name={itemIcon} />
      <View style={[$justifyAround, $flex1, { marginLeft: 20, }]}>
        <Text style={[{ textAlign: 'right', color: theme.primary.color }, $fontSize16, $fontWeight]} >99</Text>
        <Text style={[{ textAlign: 'right', color: '#7a869a' }, $fontSize12]}>{itemName}</Text>
      </View>
    </View>
  }

  const IItemTop = (info: any) => {
    return <View style={[$row, $flex1, { padding: 8, backgroundColor: '#f3f6ff', borderRadius: 10, }]}>
      <IconFont size={65} name={info.itemIcon} />
      <View style={[$justifyAround, $flex1, { marginLeft: 20, }]}>
        <Text style={[{ textAlign: 'right', color: theme.primary.color }, $fontSize16, $fontWeight]} >99</Text>
        <Text style={[{ textAlign: 'right', color: '#7a869a' }, $fontSize12]}>{info.itemName}</Text>
      </View>
    </View>
  }

  const HeadTop = () => {
    return <View>
      <View style={[$row, $flex1, { marginTop: 36, marginLeft: 20, marginRight: 20 }]}>
        {/* {itemTop('In', 'menuIn')} */}
        <IItemTop itemName={'In'} itemIcon={'menuIn'} />
        <View style={{ width: 10 }} />
        {itemTop('Received', 'menuReceived')}
      </View>

      <View style={[$row, $flex1, { marginTop: 16, marginLeft: 20, marginRight: 20 }]}>
        {itemTop('Sorted', 'menuSorted')}
        <View style={{ width: 10 }} />
        {itemTop('Check In', 'menuDelivered')}

      </View>

      <Text>Operation</Text>
    </View>

  }

两种写法